Test `notice` Division of Jekyll Theme Minimal Mistakes

Aug. 12, 2022

Introduction

My personal website¹ is created based on Jekyll theme “minimal-mistakes”². In this theme, there is a .scss file called _notices.scss³ defining a set of notice classes to stress some contents by wrapping them in the colorful box.

/* ==========================================================================
   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: $text-color;
  font-family: $global-font-family;
  font-size: $type-size-6 !important;
  text-indent: initial; /* override*/
  background-color: mix($background-color, $notice-color, $notice-background-mix);
  border-radius: $border-radius;
  box-shadow: 0 1px 1px rgba($notice-color, 0.25);

  h4 {
    margin-top: 0 !important; /* override*/
    margin-bottom: 0.75em;
    line-height: inherit;
  }

  @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: mix(#000, $notice-color, 10%);

    &:hover {
      color: mix(#000, $notice-color, 50%);
    }
  }

  @at-root #{selector-unify(&, "blockquote")} {
    border-left-color: mix(#000, $notice-color, 10%);
  }

  code {
    background-color: mix($background-color, $notice-color, $code-notice-background-mix)
  }

	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);
}

Way to stress only one paragraph including merely text and way to stress multiple paragraphs are sort of different; the former is very easy, while the latter is kind of complex (at least not a straightforward extension from the former). In this post, I would talk about them.

Stress one paragraph of text

It is convenient to stress only one paragraph of text, all we need is to press Shift + Enter at the end of the paragraph and add code {: .notice}. That’s it.

(1) notice class

NOTE：This is `{: .notice}` division[^3].
{: .notice}

NOTE：This is {: .notice} division³.

(2) notice--primary class

NOTE：This is `{: .notice--primary}` division[^3].
{: .notice--primary}

NOTE：This is {: .notice--primary} division³.

(3) notice--info class

NOTE：This is `{: .notice--info}` division[^3].
{: .notice--info}

NOTE：This is {: .notice--info} division³.

(4) notice--warning class

NOTE：This is `{: .notice--warning}` division[^3].
{: .notice--warning}

NOTE：This is {: .notice--warning} division³.

(5) notice--danger class

NOTE：This is `{: .notice--danger}` division[^3].
{: .notice--danger}

NOTE：This is {: .notice--danger} division³.

(6) notice--success class

NOTE：This is `{: .notice--success}` division[^3].
{: .notice--success}

NOTE：This is {: .notice--success} division³.

Stress multiple paragraphs including more elements

Method 1: use Jekyll liquid filter

If the purpose is to stress multiple paragraphs including more elements (images etc.) in a single notice, we could use liquid to capture content and then filter it with markdownify option. It is the way that offered by official sample blog of “minimal-mistakes” theme⁴.

For example:

{% capture notice-2 %}

This is the 1st paragraph.

This is the 2nd paragraph.

This is the 3rd paragraph.

This is the text attached with a footnote[^3].

<img src="https://raw.githubusercontent.com/HelloWorld-1017/blog-images/main/imgs/202405312012650.jpg" alt="image-202405312012650" style="zoom:50%;" />

{% endcapture %}

<div class="notice--primary">{{ notice-2 | markdownify }}</div>

The result is like:

This is the 1st paragraph.

This is the 2nd paragraph.

This is the 3rd paragraph.

This is the text attached with a footnote[^3].

It looks well but one point: the footnote is plain text with no link that it should’ve had. About this point, I have no idea how to correct it.

Method 2: directly use HTML `<div>` tag

Another way is directly putting all contents in a <div> tag with class="$CLASS_NAME" and markdown="1"⁵, which is obtained from the comments of _notices.scss file³.