From 30dab8b476e2db7b44f6ef656c46bb9680355cdb Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Sat, 18 Apr 2020 16:20:21 +0100 Subject: [PATCH] Override notices to work how Id like on dark theme --- _drafts/swiftui.md | 15 ++++- assets/css/main.scss | 12 +++- assets/css/override-notices.scss | 104 +++++++++++++++++++++++++++++++ 3 files changed, 128 insertions(+), 3 deletions(-) create mode 100644 assets/css/override-notices.scss diff --git a/_drafts/swiftui.md b/_drafts/swiftui.md index 8b98d89..cf97089 100644 --- a/_drafts/swiftui.md +++ b/_drafts/swiftui.md @@ -176,4 +176,17 @@ $(document).ready(function() { } }; } -``` \ No newline at end of file +``` + +

notice

{: .notice} +

primary

{: .notice--primary} +

info

{: .notice--info} +

warning

{: .notice--warning} +

success

{: .notice--success} +

danger

{: .notice--danger} + +
+ # Headline for the Notice +
+ Text for the notice +
\ No newline at end of file diff --git a/assets/css/main.scss b/assets/css/main.scss index 2dd7cda..34f6a0f 100644 --- a/assets/css/main.scss +++ b/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 \ No newline at end of file +@import "minimal-mistakes"; // main partials +@import "assets/css/override-notices.scss" diff --git a/assets/css/override-notices.scss b/assets/css/override-notices.scss new file mode 100644 index 0000000..3b63553 --- /dev/null +++ b/assets/css/override-notices.scss @@ -0,0 +1,104 @@ +/* ========================================================================== + NOTICE TEXT BLOCKS + ========================================================================== */ + +/** + * Default Kramdown usage (no indents!): + *
+ * #### Headline for the Notice + * Text for the notice + *
+ */ + +@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); +}