Add option for code blocks with (colored) icons

Plus "old" / "new" style with green accept / red reject icon

website/_includes/_mixins.jade

@@ -104,15 +104,31 @@ mixin button(url, trusted, ...style)
     language - [string] language for syntax highlighting (default: "python")
                supports basic relevant languages available for PrismJS
 
-mixin code(label, language)
-    pre.c-code-block.o-block(class="lang-#{(language || DEFAULT_SYNTAX)}")&attributes(attributes)
+mixin code(label, language, icon)
+    pre.c-code-block.o-block(class="lang-#{(language || DEFAULT_SYNTAX)}" class=icon ? "c-code-block--has-icon" : "")&attributes(attributes)
         if label
             h4.u-text-label.u-text-label--dark=label
 
+        if icon
+            - var classes = {'accept': 'u-color-green', 'reject': 'u-color-red'}
+            .c-code-block__icon(class=classes[icon] || "")
+                +icon(icon, 18)
+
         code.c-code-block__content
             block
 
 
+//- Code blocks to display old/new versions
+
+mixin code-old()
+    +code(false, false, "reject").o-block-small
+        block
+
+mixin code-new()
+    +code(false, false, "accept").o-block-small
+        block
+
+
 //- CodePen embed
     slug        - [string] ID of CodePen demo (taken from URL)
     height      - [integer] height of demo embed iframe

website/assets/css/_components/_code.sass

@@ -13,6 +13,17 @@
     white-space: pre
     direction: ltr
 
+    &.c-code-block--has-icon
+        padding: 0
+        display: flex
+
+.c-code-block__icon
+    padding: 0 0 0 1rem
+    display: flex
+    justify-content: center
+    align-items: center
+    border-left: 6px solid
+
 
 //- Code block content
 

website/assets/img/icons.svg

@@ -30,5 +30,11 @@
         <symbol id="help" viewBox="0 0 24 24">
             <path d="M12 6c2.203 0 3.984 1.781 3.984 3.984 0 2.484-3 2.766-3 5.016h-1.969c0-3.234 3-3 3-5.016 0-1.078-0.938-1.969-2.016-1.969s-2.016 0.891-2.016 1.969h-1.969c0-2.203 1.781-3.984 3.984-3.984zM12 20.016c4.406 0 8.016-3.609 8.016-8.016s-3.609-8.016-8.016-8.016-8.016 3.609-8.016 8.016 3.609 8.016 8.016 8.016zM12 2.016c5.531 0 9.984 4.453 9.984 9.984s-4.453 9.984-9.984 9.984-9.984-4.453-9.984-9.984 4.453-9.984 9.984-9.984zM11.016 18v-2.016h1.969v2.016h-1.969z"/>
         </symbol>
+        <symbol id="reject" viewBox="0 0 24 24">
+            <path d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z"/>
+        </symbol>
+        <symbol id="accept" viewBox="0 0 24 24">
+            <path d="M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z"/>
+        </symbol>
     </defs>
 </svg>