diff --git a/config.yaml b/config.yaml
index e8771414aba596fb2eec0b0068578dfb85f3ce1b..f21fc84d01fa3fabec4e323a35c2f12bb824d831 100755
--- a/config.yaml
+++ b/config.yaml
@@ -47,5 +47,6 @@ markup:
lineNos: true
lineNumbersInTable: true
noClasses: false
- style: solarized-light
tabWidth: 2
+theme:
+ - hugo-activitystreams
diff --git a/content/articles/2021-07-23-our-new-digital-home/index.Rmd b/content/articles/2021-07-23-our-new-digital-home/index.Rmd
index 32a10ec52232d672a673e4d1764cae68b743d4a2..49df75d067033219f50b1484081c068f17c015b7 100644
--- a/content/articles/2021-07-23-our-new-digital-home/index.Rmd
+++ b/content/articles/2021-07-23-our-new-digital-home/index.Rmd
@@ -105,6 +105,9 @@ $$
$$
{{</math>}}
+## Content in margins
+
+We can also add lovely content in the margins, tufte style. Check out this puppy. {{<mn>}}<img src="puppy.jpg"/>{{</mn>}}In this case we added it directly in the middle of the text! Isnt that so cool! Unfortunately all content in the margin must use html markup and cant rely on markdown however.
## Rscript executed and rendered
```{r, cache = TRUE}
@@ -121,6 +124,37 @@ plot(x, smooth_pulse(x, start = 0.2, stop = 0.3, cycle = 0.5), xlim = c(0,2),
```
-## Content in margins
+## Block quotes
+
+Nothing too special about blockquotes, or as Abe Lincoln said...
+
+> Blockquotes were the radest invention ever conceived, they have changed the world
+> as we know it. I use them every chance I can get, which isnt very much these days.
+> {{<mn>}}Abe Lincoln,
+Getysburg Address, July 20th, 2086{{</mn>}}
+
+## Notice boxes
+
+Sometimes you may need to get someones attention to present some information. That is the perfect use for
+the info shortcode which produces the following message box.
+
+{{<info>}}
+This is an info message. It usually tells people information that is important to note.
+{{</info>}}
+
+The cool thing is that its' even possible combine noties along with the tufte shortcodes for writing
+in the margin. Which you can see in the margin here. {{< success margin >}}Good Job!
+{{</ success >}}In this case I am using the success type notice which is usually used to congratulate the
+reader or give praise.
+
+Likewise there are warning notices
+
+{{< warn >}}
+Warning, you did something that doesnt matter much but I am still going to complain about!
+{{< /warn >}}
+
+And of course error notices.
-We can also add lovely content in the margins, tufte style. Check out this puppy. {{<mn>}}<img src="puppy.jpg"/>{{</mn>}}In this case we added it directly in the middle of the text! Isnt that so cool! Unfortunately all content in the margin must use html markup and cant rely on markdown however.
\ No newline at end of file
+{{< error >}}
+Danger will robinson, danger!
+{{< /error >}}
diff --git a/layouts/shortcodes/error.html b/layouts/shortcodes/error.html
new file mode 100644
index 0000000000000000000000000000000000000000..b68252907b0503bf549fe541e87e6e6658f676da
--- /dev/null
+++ b/layouts/shortcodes/error.html
@@ -0,0 +1,13 @@
+{{ if (eq (.Get 0) "margin") }}
+{{ $uid := now.UnixNano }}
+<label for="mn-{{ $uid }}" class="margin-toggle">⊕</label>
+<input type="checkbox" id="mn-{{ $uid }}" class="margin-toggle"/>
+<div class="marginnote">
+ {{ end }}
+ <div class="error-msg">
+ <i class="fa fa-times-circle"></i>
+ {{ .Inner }}
+ </div>
+ {{ if (eq (.Get 0) "margin") }}
+</div>
+{{ end }}
diff --git a/layouts/shortcodes/info.html b/layouts/shortcodes/info.html
new file mode 100644
index 0000000000000000000000000000000000000000..42c89296f452c01eb0e30335ab3baa41b87d9d9b
--- /dev/null
+++ b/layouts/shortcodes/info.html
@@ -0,0 +1,13 @@
+{{ if (eq (.Get 0) "margin") }}
+{{ $uid := now.UnixNano }}
+<label for="mn-{{ $uid }}" class="margin-toggle">⊕</label>
+<input type="checkbox" id="mn-{{ $uid }}" class="margin-toggle"/>
+<div class="marginnote">
+{{ end }}
+<div class="info-msg">
+ <i class="fa fa-info-circle"></i>
+ {{ .Inner }}
+</div>
+{{ if (eq (.Get 0) "margin") }}
+</div>
+{{ end }}
diff --git a/layouts/shortcodes/success.html b/layouts/shortcodes/success.html
new file mode 100644
index 0000000000000000000000000000000000000000..99409a726739e5ef6ab61af0da6fab76a3cb6b54
--- /dev/null
+++ b/layouts/shortcodes/success.html
@@ -0,0 +1,13 @@
+{{ if (eq (.Get 0) "margin") }}
+{{ $uid := now.UnixNano }}
+<label for="mn-{{ $uid }}" class="margin-toggle">⊕</label>
+<input type="checkbox" id="mn-{{ $uid }}" class="margin-toggle"/>
+<div class="marginnote">
+ {{ end }}
+ <div class="success-msg">
+ <i class="fa fa-check"></i>
+ {{ .Inner }}
+ </div>
+ {{ if (eq (.Get 0) "margin") }}
+</div>
+{{ end }}
diff --git a/layouts/shortcodes/warn.html b/layouts/shortcodes/warn.html
new file mode 100644
index 0000000000000000000000000000000000000000..a9859979cf1843205568fd7ea2709cb6fa61d395
--- /dev/null
+++ b/layouts/shortcodes/warn.html
@@ -0,0 +1,13 @@
+{{ if (eq (.Get 0) "margin") }}
+{{ $uid := now.UnixNano }}
+<label for="mn-{{ $uid }}" class="margin-toggle">⊕</label>
+<input type="checkbox" id="mn-{{ $uid }}" class="margin-toggle"/>
+<div class="marginnote">
+ {{ end }}
+ <div class="warning-msg">
+ <i class="fa fa-warning"></i>
+ {{ .Inner }}
+ </div>
+ {{ if (eq (.Get 0) "margin") }}
+</div>
+{{ end }}
diff --git a/static/assets/css/custom.css b/static/assets/css/custom.css
index e234d50595143a71fb8fdeda2829d9b9605a9c3c..3badddabb29330f70cd0d820759e3e9dda6d2f37 100755
--- a/static/assets/css/custom.css
+++ b/static/assets/css/custom.css
@@ -539,3 +539,30 @@ code {
border-left-width: 3px;
border-left-style: dotted;
}
+
+/*---------------------------------------------*/
+
+.info-msg,
+.success-msg,
+.warning-msg,
+.error-msg {
+ margin: 10px 0;
+ padding: 10px;
+ border-radius: 3px 3px 3px 3px;
+}
+.info-msg {
+ color: #059;
+ background-color: #BEF;
+}
+.success-msg {
+ color: #270;
+ background-color: #DFF2BF;
+}
+.warning-msg {
+ color: #9F6000;
+ background-color: #FEEFB3;
+}
+.error-msg {
+ color: #D8000C;
+ background-color: #FFBABA;
+}