source/scss: Import vanilla blog.css from Bootstrap example

I want to keep a vanilla version of theirs separate from my local
modifications.
This commit is contained in:
Alan Orth 2020-12-08 14:18:16 +02:00
parent 674cb7f02e
commit 0ac220d453
Signed by: alanorth
GPG Key ID: 0FB860CC9C45B1B9
2 changed files with 10 additions and 93 deletions

View File

@ -1,113 +1,26 @@
/* stylelint-disable selector-list-comma-newline-after */
.blog-header {
line-height: 1;
border-bottom: 1px solid #e5e5e5;
}
.blog-header-logo {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 2.25rem;
}
.blog-header-logo:hover {
text-decoration: none;
}
/* don't style links in headers */
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
}
}
.display-4 {
font-size: 2.5rem;
}
@media (min-width: 768px) {
.display-4 {
font-size: 3rem;
}
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-scroller .nav-link {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: .875rem;
}
.card-img-right {
height: 100%;
border-radius: 0 3px 3px 0;
}
.flex-auto {
flex: 0 0 auto;
}
/* use larger height for featured blocks */
.h-300 { height: 300px; }
@media (min-width: 768px) {
.h-md-300 { height: 300px; }
}
/* 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: #727272;
}
/* make sure article images don't escape their parent */
article img {
max-width: 100%;
height: auto;
margin: 13px auto;
}
/*
* Footer
*/
.blog-footer {
padding: 2.5rem 0;
/* italicize and mute figure captions */
figcaption {
font-style: italic;
color: #727272;
text-align: center;
background-color: #f9f9f9;
border-top: .05rem solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}

View File

@ -2,6 +2,10 @@
// see: node_modules/bootstrap/scss/bootstrap.scss
@import 'bootstrap';
// Bootstrap v5 Blog Example CSS
// see: https://getbootstrap.com/docs/5.0/examples/blog/blog.css
@import 'blog';
// self-hosted Playfair font
// see: https://medium.com/clio-calliope/making-google-fonts-faster-aadf3c02a36d
@import 'fonts';