From 0edaa8197478343f28318b112302db798925c34b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Wed, 4 Sep 2024 19:48:14 +0200
Subject: [PATCH] notice: collapse borders if single code block is displayed
 #906

---
 .../content/basics/migration/_index.en.md     |  6 ++++
 exampleSite/content/shortcodes/notice.en.md   | 28 +++++++++++++++++++
 static/css/theme.css                          |  8 ++++++
 3 files changed, 42 insertions(+)

diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md
index 2b0696ad17..82ff00e7f0 100644
--- a/exampleSite/content/basics/migration/_index.en.md
+++ b/exampleSite/content/basics/migration/_index.en.md
@@ -18,6 +18,12 @@ This document shows you what's new in the latest release and flags it with one o
 
 ---
 
+## 6.4.0.beta (XXXX-XX-XX) {#640}
+
+- {{% badge style="note" title=" " %}}Change{{% /badge %}} If you now display a single code block in a `notice` box, its [margin and border will be removed](shortcodes/notice#code-with-collapsed-colored-borders) so only the colored notice border is visible.
+
+---
+
 ## 6.3.0 (2024-09-03) {#630}
 
 - {{% badge style="note" title=" " %}}Change{{% /badge %}} The [`expand` shortcode](shortcodes/expand) changed the naming of the `open` parameter to `expanded`. You don't need to change anything yet but may get deprecation warnings.
diff --git a/exampleSite/content/shortcodes/notice.en.md b/exampleSite/content/shortcodes/notice.en.md
index 5bca066ba0..aca0e49502 100644
--- a/exampleSite/content/shortcodes/notice.en.md
+++ b/exampleSite/content/shortcodes/notice.en.md
@@ -309,3 +309,31 @@ Just a box
 > [!info] Can callouts be nested?
 > > [!important] Yes!, they can.
 > > > [!tip]  You can even use multiple layers of nesting.
+
+#### Code with Collapsed Colored Borders
+
+````
+```c
+// Normal code:
+printf( "Hello world\n" )
+```
+
+{{%/* notice style="red" title="" */%}}
+```c
+// With colored border
+printf( "Hello world\n" )
+```
+{{%/* /notice */%}}
+````
+
+```c
+// Normal code:
+printf( "Hello world\n" )
+```
+
+{{% notice style="red" title="" %}}
+```c
+// With colored border
+printf( "Hello world\n" )
+```
+{{% /notice %}}
diff --git a/static/css/theme.css b/static/css/theme.css
index 3e042c367d..7936a9e22f 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -721,6 +721,14 @@ div.box > .box-content {
     padding-left: 1rem;
     padding-right: 1rem;
 }
+/* remove margin if only a single code block is contained in the tab */
+#R-body .box-content:has(> div.highlight:only-child){
+    padding: 0;
+}
+/* remove border from a code block if single  */
+#R-body .box-content > div.highlight:only-child > pre{
+    border: 0;
+}
 
 p:empty {
     /* in case of image render hook, Hugo may generate empty <p>s that we want to ignore */