From 0ac220d453268bd3dfdb8e7ee346b9b4dea3d0df Mon Sep 17 00:00:00 2001
From: Alan Orth <alan.orth@gmail.com>
Date: Tue, 8 Dec 2020 14:18:16 +0200
Subject: [PATCH] source/scss: Import vanilla blog.css from Bootstrap example

I want to keep a vanilla version of theirs separate from my local
modifications.
---
 source/scss/main.scss  | 99 +++---------------------------------------
 source/scss/style.scss |  4 ++
 2 files changed, 10 insertions(+), 93 deletions(-)

diff --git a/source/scss/main.scss b/source/scss/main.scss
index 5273e98..e973910 100644
--- a/source/scss/main.scss
+++ b/source/scss/main.scss
@@ -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;
 }
diff --git a/source/scss/style.scss b/source/scss/style.scss
index 8200503..9b870e6 100644
--- a/source/scss/style.scss
+++ b/source/scss/style.scss
@@ -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';