Namespace the box classes a bit

Avoid conflicting with other generic names

Author: ISSOtm

custom/style.css

@@ -81,28 +81,28 @@ code {
   text-transform: uppercase;
 }
 
-.box.tip {
+.tip-box {
   border-color: #42b983;
   background-color: var(--quote-bg);
 }
 
-.box.warning {
+.warning-box {
   border-left-color: var(--c-warning);
   background-color: rgba(255, 229, 100, 0.2);
   color: var(--c-warning-text);
 }
 
-.box.warning > .box-title {
+.warning-box > .box-title {
   color: var(--c-warning-title);
 }
 
-.box.danger {
+.danger-box {
     border-left-color: var(--c-danger);
     background-color: rgba(255, 0, 0, .15);
     color: var(--c-danger-text);
 }
 
-.box.danger > .box-title {
+.danger-box > .box-title {
     color: var(--c-danger-title);
 }
 

preproc/src/admonitions.rs

@@ -80,9 +80,9 @@ impl<'a, Iter: Iterator<Item = Event<'a>>> Iterator for AdmonitionsGenerator<'a,
 
                                 evt = Event::Html(
                                     if title.is_empty() {
-                                        format!("<div class=\"box {kind}\">")
+                                        format!("<div class=\"box {kind}-box\">")
                                     } else {
-                                        format!("<div class=\"box {kind}\"><p class=\"box-title\">{title}</p>")
+                                        format!("<div class=\"box {kind}-box\"><p class=\"box-title\">{title}</p>")
                                     }
                                     .into(),
                                 );