add loose files within _sass/ subdir

.vscode/settings.json

@@ -21,7 +21,7 @@
   // Auto-fix JS files with ESLint using our custom settings. Needs
   // https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "[json5]": {
     "editor.formatOnSave": true

_sass/_about.scss

@@ -0,0 +1,3 @@
+p {
+  text-indent: 2em;
+}

_sass/_blog.scss

@@ -0,0 +1,16 @@
+@import 'byline';
+@import 'post-carousel';
+@import 'social-box';
+@import 'post';
+@import 'bootstrap/images';
+@import 'bootstrap/utilities/text';
+@import 'bootstrap/utilities/spacing';
+@import 'bootstrap/pagination';
+
+.post-divider {
+  margin: 3rem 0;
+}
+
+.page-link {
+  margin-left: -2px; // needed for 2px border
+}

_sass/_byline.scss

@@ -0,0 +1,30 @@
+.byline {
+  margin-top: 12px;
+  clear: both;
+  color: $text-muted;
+}
+
+.byline-author {
+  display: inline-block;
+}
+
+.byline-pubdate {
+  display: block;
+  font-size: small;
+}
+
+.byline-author {
+  line-height: 40px;
+  text-decoration: none;
+  text-transform: none;
+}
+
+.byline-photo {
+  float: left;
+  margin-right: 1em;
+  border-radius: 100%;
+
+  > img {
+    object-fit: cover;
+  }
+}

_sass/_contact.scss

@@ -0,0 +1,31 @@
+/*!
+ * Reflection Theme
+ */
+
+.contact {
+  .blurb {
+    text-align: justify;
+    text-indent: 2em;
+  }
+
+  .lead {
+    font-size: 1.25rem;
+    font-weight: 300;
+  }
+
+  ul.methods li {
+    margin-top: 2rem;
+  }
+
+  .icon {
+    float: left;
+    margin-right: 10px;
+    display: block;
+    width: 24px;
+    height: 24px;
+
+    svg path {
+      fill: $brand-primary;
+    }
+  }
+}

_sass/_custom-breadcrumb.scss

@@ -0,0 +1,15 @@
+.breadcrumb {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 2px solid $text-muted;
+}
+
+.breadcrumb-item,
+.breadcrumb-item.active {
+  font-size: .875rem;
+  line-height: 1.5rem;
+}
+
+.breadcrumb-item a {
+  color: $text-muted;
+}

_sass/_custom.scss

@@ -0,0 +1,81 @@
+// Bootstrap overrides
+//
+// Copy variables from `bootstrap/_variables.scss` to this file to override default values
+// without modifying source files.
+
+// Table of Contents
+//
+// Colors
+// Body
+// Typography
+// Tables
+// Buttons
+// Navbar
+// Breadcrumbs
+// Code
+
+// Colors
+
+$brand-primary: #ba160c;
+$brand-secondary: #e7dbda;
+$brand-tertiary: #bbc6d3;
+$brand-quaternary: #384657;
+$brand-foreground: lighten($brand-secondary, 10%);
+$brand-well: saturate(darken($brand-foreground, 3%), 10%);
+$footer-foreground: darken($brand-secondary, 40%);
+
+// Spacing
+
+$border-width: 2px;
+
+// Body
+
+$body-bg: $brand-secondary;
+$body-color: #384657;
+
+// Typography
+
+$text-muted: darken($brand-tertiary, 32%);
+
+$hr-border-color: $brand-secondary;
+
+$blockquote-border-color: $brand-secondary;
+
+// Tables
+
+$table-bg-hover: $brand-secondary;
+
+$table-border-color: $brand-secondary;
+
+// Pagination
+
+$pagination-bg:                        $brand-foreground;
+$pagination-border-color:              $brand-secondary;
+
+$pagination-hover-bg:                  $brand-foreground;
+$pagination-hover-border:              $brand-secondary;
+
+$pagination-active-color:              $brand-foreground;
+
+$pagination-disabled-color:            $brand-secondary;
+$pagination-disabled-bg:               $brand-foreground;
+$pagination-disabled-border:           $brand-secondary;
+
+// Navbar
+
+$navbar-brand-padding-y: 12px;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:          .5em;
+$breadcrumb-padding-x:          .65em;
+$breadcrumb-item-padding:       .5em;
+
+$breadcrumb-bg:                 transparent;
+$breadcrumb-divider-color:      $text-muted;
+$breadcrumb-active-color:       $text-muted;
+$breadcrumb-divider:            "\276F";
+
+// Code
+
+$code-bg: $brand-well;

_sass/_discrete-sessions.scss

@@ -0,0 +1,67 @@
+/*!
+ * Reflection Theme
+ */
+
+.discrete-sessions {
+
+  ._bubble {
+    background-size: 90%;
+    // background-color: #ba160c;
+    border-radius: $border-radius;
+    border: $border-width solid #ba160c;
+
+    svg {
+      width: 80%;
+      margin: 13.5% 10%;
+
+      @include media-breakpoint-up(md) {
+        width: 30%;
+        margin: 10%;
+      }
+
+      @include media-breakpoint-up(lg) {
+        width: 30%;
+        margin: 10%;
+      }
+    }
+
+    svg path {
+      fill: #ba160c;
+    }
+  }
+}
+
+.banner-wrapper {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 60%; // acts as fluid height
+  margin-bottom: .5rem;
+  overflow: hidden;
+
+  @include media-breakpoint-up(sm) {
+    padding-bottom: 21rem
+  }
+
+  @include media-breakpoint-up(md) {
+    padding-bottom: 14.8rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    padding-bottom: 19.7rem;
+  }
+
+  @include media-breakpoint-up(xl) {
+    padding-bottom: 23.4rem;
+  }
+}
+
+.banner-img {
+  position:absolute;
+  width: 100%;
+  height: 100%;
+  // background-position: center center;
+  // background-size: 22rem;
+  // background-repeat: no-repeat;
+  // background-color: #3776ab;
+}

_sass/_featured-sites.scss

@@ -0,0 +1,21 @@
+.featured-sites {
+  margin-right: -1px;
+  margin-left: -1px;
+}
+.featured-sites .col-xs-6 {
+  padding: 1px;
+}
+.featured-sites .img-fluid {
+  margin-top: 0;
+}
+
+@media (min-width: 768px) {
+  .featured-sites .col-sm-3:first-child img {
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+  .featured-sites .col-sm-3:last-child img {
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+  }
+}

_sass/_featurettes.scss

@@ -0,0 +1,89 @@
+.featurette {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-top: $border-width solid $brand-tertiary;
+
+  .highlight {
+    text-align: left;
+  }
+
+  .lead {
+    margin-right: auto;
+    margin-bottom: 2rem;
+    margin-left: auto;
+    font-size: 1rem;
+    text-align: center;
+    display: block;
+  }
+
+  @include media-breakpoint-up(sm) {
+    text-align: left;
+  }
+
+  @include media-breakpoint-up(md) {
+    .col-sm-6:first-child {
+      padding-right: ($grid-gutter-width-base * 1.5);
+    };
+    .col-sm-6:last-child {
+      padding-left: ($grid-gutter-width-base * 1.5);
+    }
+  }
+}
+
+.featurette-title {
+  margin-bottom: .5rem;
+  font-size: 1.7rem;
+  font-weight: normal;
+  text-align: center;
+}
+
+.half-rule {
+  width: 6rem;
+  margin: 2.5rem auto;
+
+  @include media-breakpoint-up(sm) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+.featurette h4 {
+  margin-top: 1rem;
+  margin-bottom: .5rem;
+  font-weight: normal;
+}
+.featurette-img {
+  display: block;
+  margin-bottom: 1.25rem;
+}
+.featurette-img:hover {
+  color: $brand-primary;
+  text-decoration: none;
+}
+.featurette-img img {
+  display: block;
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 480px) {
+  .featurette .img-fluid {
+    margin-top: 2rem;
+  }
+}
+@include media-breakpoint-up(md) {
+  .featurette {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+  .featurette-title {
+    font-size: $font-size-h1;
+
+    + .lead {
+      font-size: 1.5rem;
+    }
+  }
+  .featurette .img-fluid {
+    margin-top: 0;
+  }
+}

_sass/_footer.scss

@@ -0,0 +1,27 @@
+.footer {
+  margin: 1rem 0;
+  text-align: center;
+
+  span {
+    font-size: .625rem;
+    color: $footer-foreground;
+    display: block;
+
+    a {
+      color: $footer-foreground;
+      text-decoration: underline;
+    }
+  }
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: 1rem 0 0 0;
+
+    path,
+    polygon,
+    rect, {
+      fill: $footer-foreground;
+    }
+  }
+}