Override notices to work how Id like on dark theme

_drafts/swiftui.md

@@ -176,4 +176,17 @@ $(document).ready(function() {
     }
   };
 }
-```
+```
+
+<p>notice</p>{: .notice} 
+<p>primary</p>{: .notice--primary}
+<p>info</p>{: .notice--info}
+<p>warning</p>{: .notice--warning}
+<p>success</p>{: .notice--success}
+<p>danger</p>{: .notice--danger}
+
+<div class="notice--success" markdown="1">
+  # Headline for the Notice
+  <br>
+  Text for the notice
+</div>

assets/css/main.scss

@@ -12,13 +12,20 @@
 /* Colors */
 $background-color: #141010 !default;
 $text-color: #fff6fbb9 !default;
-$primary-color: #790b61 !default;
+$primary-color: #ff00ff !default;
 $link-color: $primary-color !default;
 $link-color-hover: mix(#fff, $link-color, 25%) !default;
 $link-color-visited: mix(#000, $link-color, 25%) !default;
 $code-background-color: mix(rgb(43, 39, 39), $background-color, 15%) !default;
 $code-background-color-dark: mix(rgb(59, 54, 54), $background-color, 20%) !default;
 
+/* Notices */
+
+$success-color: #3fa63f !default;
+$warning-color: #d67f05 !default;
+$danger-color: #ff0000 !default;
+$info-color: #3b9cba !default;
+
 /* neon syntax highlighting (base16) */
 $base00: #1a191a;
 $base01: #e0e0e0;
@@ -125,4 +132,5 @@ $base0f: #926e5c;
 
 //@import "progress.css"; // for progress bar
 @import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
-@import "minimal-mistakes"; // main partials
+@import "minimal-mistakes"; // main partials
+@import "assets/css/override-notices.scss"

assets/css/override-notices.scss

@@ -0,0 +1,104 @@
+/* ==========================================================================
+   NOTICE TEXT BLOCKS
+   ========================================================================== */
+
+/**
+ *  Default Kramdown usage (no indents!):
+ *  <div class="notice" markdown="1">
+ *  #### Headline for the Notice
+ *  Text for the notice
+ *  </div>
+ */
+
+@mixin notice($notice-color) {
+  margin: 2em 0 !important;  /* override*/
+  padding: 1em;
+  color: $dark-gray;
+  font-family: $global-font-family;
+  font-size: $type-size-6 !important;
+  text-indent: initial; /* override*/
+  background-color: mix(#fff, $notice-color, 55%); //original percentage was 90
+  border-radius: $border-radius;
+  box-shadow: 0 1px 1px rgba($notice-color, 0.25);
+
+  h4 {
+    margin-top: 0 !important; /* override*/
+    margin-bottom: 0.75em;
+  }
+
+  @at-root .page__content #{&} h4 {
+    /* using at-root to override .page-content h4 font size*/
+    margin-bottom: 0;
+    font-size: 1em;
+  }
+
+  p {
+    &:last-child {
+      margin-bottom: 0 !important; /* override*/
+    }
+  }
+
+  h4 + p {
+    /* remove space above paragraphs that appear directly after notice headline*/
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  a {
+    color: $notice-color;
+
+    &:hover {
+      color: mix(#000, $notice-color, 40%);
+    }
+  }
+
+  code {
+    background-color: mix(#fff, $notice-color, 95%)
+  }
+
+	pre code {
+		background-color: inherit;
+	}
+
+  ul {
+    &:last-child {
+      margin-bottom: 0; /* override*/
+    }
+  }
+}
+
+/* Default notice */
+
+.notice {
+  @include notice($light-gray);
+}
+
+/* Primary notice */
+
+.notice--primary {
+  @include notice($primary-color);
+}
+
+/* Info notice */
+
+.notice--info {
+  @include notice($info-color);
+}
+
+/* Warning notice */
+
+.notice--warning {
+  @include notice($warning-color);
+}
+
+/* Success notice */
+
+.notice--success {
+  @include notice($success-color);
+}
+
+/* Danger notice */
+
+.notice--danger {
+  @include notice($danger-color);
+}