mirror of
https://github.com/alanorth/hugo-theme-bootstrap4-blog.git
synced 2024-11-14 00:07:03 +01:00
Alan Orth
132d659955
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.
196 lines
3.1 KiB
SCSS
196 lines
3.1 KiB
SCSS
/*
|
|
* From the Bootstrap v4 alpha blog example
|
|
* See: http://v4-alpha.getbootstrap.com/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 {
|
|
padding: ($spacer / 2) $spacer;
|
|
margin-bottom: $spacer;
|
|
font-size: $blockquote-font-size;
|
|
border-left: $blockquote-border-width solid $blockquote-border-color;
|
|
}
|
|
|
|
/*
|
|
* 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;
|
|
}
|