Explain difference in logo variants

styleguide/assets/style/styleguide.css

@@ -508,7 +508,7 @@ i[data-icon] {
   box-sizing: content-box;
 }
 i[data-icon]::before {
-  content: "";
+  content: '';
   display: block;
   width: 100%;
   height: 100%;
@@ -517,31 +517,31 @@ i[data-icon]::before {
   mask-repeat: no-repeat;
   background-color: currentColor;
 }
-i[data-icon][data-icon=arrow-left]::before {
+i[data-icon][data-icon='arrow-left']::before {
   mask-image: url("../icon/arrow_left.svg");
 }
-i[data-icon][data-icon=arrow-up]::before {
+i[data-icon][data-icon='arrow-up']::before {
   mask-image: url("../icon/arrow_up.svg");
 }
-i[data-icon][data-icon=arrow-right]::before {
+i[data-icon][data-icon='arrow-right']::before {
   mask-image: url("../icon/arrow_right.svg");
 }
-i[data-icon][data-icon=arrow-down]::before {
+i[data-icon][data-icon='arrow-down']::before {
   mask-image: url("../icon/arrow_down.svg");
 }
-i[data-icon][data-icon=info]::before {
+i[data-icon][data-icon='info']::before {
   mask-image: url("../icon/info.svg");
 }
-i[data-icon][data-icon=home]::before {
+i[data-icon][data-icon='home']::before {
   mask-image: url("../icon/home.svg");
 }
-i[data-icon][data-icon=menu-small]::before {
+i[data-icon][data-icon='menu-small']::before {
   mask-image: url("../icon/menu_small.svg");
 }
-i[data-icon][data-icon=light]::before {
+i[data-icon][data-icon='light']::before {
   mask-image: url("../icon/lightbulb.svg");
 }
-i[data-icon][data-icon=warning]::before {
+i[data-icon][data-icon='warning']::before {
   mask-image: url("../icon/warning.svg");
 }
 
@@ -730,6 +730,10 @@ body > div main {
   }
 }
 
+.background {
+  background-color: var(--color-background);
+}
+
 a.a-regular, a.a-regular:hover, a.a-regular:active, a.a-regular:focus, a.a-regular:visited {
   color: var(--color-accent-1);
   text-decoration: underline;
@@ -767,7 +771,7 @@ a.a-visited, a.a-visited:hover, a.a-visited:active, a.a-visited:focus {
   margin: 0;
 }
 .alert::before {
-  content: "";
+  content: '';
   position: absolute;
   inset: 0;
   border-radius: 1rem;

styleguide/assets/style/styleguide.scss

@@ -31,16 +31,16 @@ body {
       object-fit: contain;
     }
 
-    #backToWiki > img {
+    #backToWiki>img {
       transition: transform 200ms;
     }
 
-    #backToWiki:hover > img {
+    #backToWiki:hover>img {
       transform: scale(1.05);
     }
   }
 
-  > div {
+  >div {
     display: flex;
     gap: 1rem;
     flex-grow: 1;
@@ -136,7 +136,7 @@ body {
             }
           }
 
-          > a {
+          >a {
             display: flex;
             align-items: center;
             gap: 0.5rem;
@@ -226,6 +226,10 @@ body {
   }
 }
 
+.background {
+  background-color: var(--color-background);
+}
+
 a {
 
   &.a-regular,
@@ -298,14 +302,14 @@ pre,
   display: flex;
   width: 100%;
 
-  & > * {
+  &>* {
     width: 100%;
   }
 
   @media (max-width: $breakpoint-mobile) {
     flex-wrap: wrap;
 
-    & > * {
+    &>* {
       width: 100%;
     }
   }
@@ -315,7 +319,7 @@ pre,
   display: flex;
   align-items: center;
 
-  & > * {
+  &>* {
     width: 100%;
   }
 
@@ -323,14 +327,14 @@ pre,
     flex-wrap: wrap;
     justify-content: center;
 
-    & > * {
+    &>* {
       width: 100%;
     }
   }
 }
 
 
-main > div.generator {
+main>div.generator {
   display: flex;
   flex-direction: column;
   gap: 1em;
@@ -361,7 +365,7 @@ main > div.generator {
     gap: 1rem;
     margin-top: 2rem;
 
-    & > span {
+    &>span {
       width: 100%;
       font-size: var(--text-xl);
     }