feat(styles): Make special paragraphs use double borders

2 files changed, 18 insertions, 10 deletions

diff --git a/ext/global.du b/ext/global.du
index 8034f98..e8a98b3 100644
--- a/ext/global.du
+++ b/ext/global.du
@@ -2,9 +2,9 @@
 
 # Attention blocks
 
-'define_block note <div class="special-par note-par"> </div>
+'define_block note <div class="special-par note-par"><div class="special-contents"> </div></div>
 
-'define new_attention 'define_block [$name] <div class="special-par [$name]-par"><img src="/img/[$image]" class="special-par-icon borderless unzoomable" alt="[$name]"> </div>
+'define new_attention 'define_block [$name] <div class="special-par [$name]-par"><div class="special-contents special-with-icon"><img src="/img/[$image]" class="special-par-icon borderless unzoomable" alt="[$name]"> </div></div>
 
     'define name question
     'define image dialog-question.png
diff --git a/src/styles.css b/src/styles.css
index 55d8422..133afe2 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -230,13 +230,26 @@ article > #article-container > h1:first-child {
 
 /*### Wrapper > Article > special paragraphs ###*/
 
+.question-par  { border-left: 2px solid #4a85cb; border-right: none; border-top: none; border-bottom: none; }
+.warn-par      { border: 2px dashed #fac848; }
+.important-par { border: 2px dashed #f46062; }
+.note-par      { border: 2px dashed #47b481; }
+
 .special-par {
   position: relative;
+  margin: 1em 0;
+  padding: 2px;
+}
+.special-contents {
+  border: inherit;
+  border-style: solid;
+}
+.special-with-icon {
   padding: 0.5em;
   padding-left: calc(32px + 1em);
-  margin: 1em 0;
 }
-.special-par > .gap-small, .special-par > .gap {
+
+.special-contents > .gap-small, .special-contents > .gap {
   display: none;
 }
 .special-par-icon {
@@ -246,13 +259,8 @@ article > #article-container > h1:first-child {
   top: calc(50% - 16px);
 }
 
-.question-par  { border-left: 2px solid #4a85cb; }
-.warn-par      { border: 2px dashed #fac848; }
-.important-par { border: 2px solid #f46062; }
-.note-par {
-  border: 2px solid #47b481;
+.note-par > .special-contents {
   padding: 0.5rem 1rem;
-  background-color: var(--pre-bg-color);
 }
 .note-par > h1:first-of-type,
 .note-par > h2:first-of-type,