typography elements, dark mode fixes

pages/_docs/typography.md

@@ -40,6 +40,39 @@ Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br /></hide>
 <var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br /></hide>
 {% endexample %}
 
+### Horizontal rules
+
+{% example %}
+<hr> 
+{% endexample %}
+
+#### Horizontal rules with label
+
+{% example %}
+<p>
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+</p>
+<div class="hr-text">
+  <span>Rule text</span>
+</div>
+<p>
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+</p>
+<div class="hr-text hr-text-center">
+  <span>Rule text</span>
+</div>
+<p>
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+</p>
+<div class="hr-text hr-text-right">
+  <span>Rule text</span>
+</div>
+<p>
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+</p>
+{% endexample %}
+
+
 ### Optimized for Asian, African, and Middle Eastern alphabets
 
 {% example %}

pages/_includes/layout/page-title.html

@@ -2,11 +2,9 @@
 <div class="page-title-box">
 	<h2 class="page-title">
 		{{ page.page-title | default: layout.page-title }}
-		{% if page.done %}
-		{% include ui/icon.html icon="check" color="success" %}
-		{% endif %}
 	</h2>
 
+   {% if page.page-right %}
 	<div class="page-options d-none d-md-block ml-auto">
 
 		{% if page.page-right == "date" %}
@@ -36,5 +34,6 @@
 		</ol>
 		{% endif %}
 	</div>
+   {% endif %}
 </div>
 {% endif %}

pages/_layouts/default.html

@@ -17,7 +17,7 @@ layout: base
       </div>
 
       <main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
-         <!--{% include layout/page-title.html %}-->
+         {% include layout/page-title.html %}
 
          {{ content }}
       </main>

scss/_dark.scss

@@ -20,6 +20,8 @@
   .topnav,
   .navbar,
   .form-control,
+  .form-select,
+  .form-switch .form-check-input,
   .selectgroup-button {
     background: rgba(0, 0, 0, .1);
     color: inherit;

scss/_variables.scss

@@ -43,9 +43,9 @@ $dark: #1c2c41 !default;
 $black: #000 !default;
 $white: #fff !default;
 
-$body-bg: #f7fafc !default;
+$body-bg: #f5f7fb !default;
+$body-color: #343a40 !default;
 
-$text-color: #495057 !default;
 $text-muted: #888e9a !default;
 $text-muted-light: #adb5bd !default;
 
@@ -125,6 +125,9 @@ $h6-font-size: $font-size-base * .875 !default;
 $blockquote-font-size: $h4-font-size !default;
 $lead-font-size: $h3-font-size !default;
 
+$hr-opacity: .1 !default;
+$hr-margin-y: 1rem !default;
+
 //Sizing
 $spacer: 1rem !default;
 $spacers: (
@@ -270,8 +273,6 @@ $card-border-color: $border-color !default;
 $list-group-border-color: $border-color !default;
 $list-group-action-color: inherit !default;
 
-$body-color: $dark !default;
-
 $input-disabled-bg: $gray-100 !default;
 $input-border-color: $border-color !default;
 $input-placeholder-color: $text-muted-light !default;

scss/layout/_page.scss

@@ -2,8 +2,7 @@
   display: flex;
   align-items: center;
   min-height: 2.5rem;
-  margin: 1rem 0;
-  color: $text-muted;
+  margin: .5rem 0 1.5rem;
 }
 
 .page-title {

scss/ui/_buttons.scss

 .btn {
   letter-spacing: .03em;
-  text-transform: uppercase;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
 
   .flag {

scss/ui/_examples.scss

 .example {
-  padding: 1.5rem;
+  padding: 2rem;
   margin: 1rem 0 0;
   border: 1px solid $border-color;
   border-radius: 3px 3px 0 0;

scss/ui/_pagination.scss

@@ -40,7 +40,7 @@
 .page-item-title {
   font-size: $h3-font-size;
   font-weight: 400;
-  color: $text-color;
+  color: $body-color;
 
   .page-link:hover & {
     color: $link-color;

scss/ui/_typo.scss

+@import 'typo/hr';
+
 .lead {
   line-height: 1.4;
 }
@@ -62,19 +64,7 @@ code {
   }
 }
 
-hr,
-.hr {
-  margin: 2rem auto;
-  border-top-color: $border-color;
-}
 
-.hr-dash {
-  border-top-style: dashed;
-}
-
-.hr-dot {
-  border-top-style: dotted;
-}
 
 pre {
   padding: 1rem;

scss/ui/typo/_hr.scss

+
+/**
+Horizontal rules
+ */
+.hr {
+  @extend hr;
+}
+
+/**
+Hr text
+ */
+.hr-text {
+  margin: $hr-margin-y 0;
+  display: flex;
+  align-items: center;
+  font-size: $h6-font-size;
+
+  &:after,
+  &:before {
+    height: $hr-height;
+    background-color: currentColor;
+    opacity: $hr-opacity;
+    flex: 1 1 auto;
+  }
+
+  &:after {
+    content: '';
+  }
+
+  > *:first-child {
+    padding-left: 0;
+    padding-right: .5rem;
+    color: $text-muted;
+  }
+
+  &.hr-text-center {
+    &:before {
+      content: '';
+    }
+
+    & > *:first-child {
+      padding-left: .5rem;
+      padding-right: .5rem;
+    }
+  }
+
+  &.hr-text-right {
+    &:before {
+      content: '';
+    }
+
+    &:after {
+      content: none;
+    }
+
+    & > *:first-child {
+      padding-left: .5rem;
+      padding-right: 0;
+    }
+  }
+}