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:
parent
674cb7f02e
commit
0ac220d453
@ -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;
|
||||
}
|
||||
|
@ -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';
|
||||
|
Loading…
Reference in New Issue
Block a user