style: add graphics to feature panels

Author: julioest

docs/website/data.json

@@ -88,19 +88,27 @@
   "panels": [
     {
       "description": "MrDocs understands C++ features such as attributes and noexcept functions.",
-      "source": "terminate.cpp"
+      "source": "terminate.cpp",
+      "imageClass": "mrdocs",
+      "boxClass": "box1 box-shape3 box270"
     },
     {
       "description": "Specially formatted comments are rendered to form a reference as part of documentation.",
-      "source": "distance.cpp"
+      "source": "distance.cpp",
+      "imageClass": "cards",
+      "boxClass": "box1 box-shape1 box0"
     },
     {
       "description": "Special directives are used to describe details about the symbols.",
-      "source": "is_prime.cpp"
+      "source": "is_prime.cpp",
+      "imageClass": "shouting",
+      "boxClass": "box1 box-shape2 box90"
     },
     {
       "description": "It understands concepts, constraints and SFINAE.",
-      "source": "sqrt.cpp"
+      "source": "sqrt.cpp",
+      "imageClass": "thinking",
+      "boxClass": "box1 box-shape1 box180"
     }
   ]
 }

docs/website/index.html

@@ -79,7 +79,7 @@ <h1>MrDocs</h1>
                 <div class="grid principles-banner">
                     <div class="principles-image">
                         <div class="box1 box-shape1 box0">
-                        <div class="inner-box thinking"></div>
+                            <div class="inner-box thinking"></div>
                         </div>
                     </div>
                     <div class="principles-content">
@@ -155,6 +155,9 @@ <h3>MrDocs let's you keep the code simple and maintainable.</h3>
 [[noreturn]]
 <span class="hljs-function"><span class="hljs-type">void</span>
 <span class="hljs-title">terminate</span><span class="hljs-params">()</span> <span class="hljs-keyword">noexcept</span></span>;</code></pre>
+                            <div class="box1 box-shape3 box270">
+                                <div class="inner-box mrdocs"></div>
+                            </div>
                         </div>
                         <div class="documentation-panel">
                             <div>
@@ -209,6 +212,9 @@ <h4>NOTE</h4>
 */</span>
 <span class="hljs-function"><span class="hljs-type">double</span>
 <span class="hljs-title">distance</span><span class="hljs-params">(<span class="hljs-type">double</span> x0, <span class="hljs-type">double</span> y0, <span class="hljs-type">double</span> x1, <span class="hljs-type">double</span> y1)</span></span>;</code></pre>
+                            <div class="box1 box-shape1 box0">
+                                <div class="inner-box cards"></div>
+                            </div>
                         </div>
                         <div class="documentation-panel">
                             <div>
@@ -294,6 +300,9 @@ <h3>Parameters</h3>
 */</span>
 <span class="hljs-function"><span class="hljs-type">bool</span>
 <span class="hljs-title">is_prime</span><span class="hljs-params">(<span class="hljs-type">unsigned</span> <span class="hljs-type">long</span> <span class="hljs-type">long</span> n)</span> <span class="hljs-keyword">noexcept</span></span>;</code></pre>
+                            <div class="box1 box-shape2 box90">
+                                <div class="inner-box shouting"></div>
+                            </div>
                         </div>
                         <div class="documentation-panel">
                             <div>
@@ -387,6 +396,9 @@ <h3>Parameters</h3>
     <span class="hljs-keyword">return</span> result;
 }
 </code></pre>
+                            <div class="box1 box-shape1 box180">
+                                <div class="inner-box thinking"></div>
+                            </div>
                         </div>
                         <div class="documentation-panel">
                             <div>

docs/website/index.html.hbs

@@ -90,7 +90,7 @@
                 <div class="grid principles-banner">
                     <div class="principles-image">
                         <div class="box1 box-shape1 box0">
-                        <div class="inner-box thinking"></div>
+                            <div class="inner-box thinking"></div>
                         </div>
                     </div>
                     <div class="principles-content">
@@ -153,6 +153,9 @@
                     <div class="panel-container">
                         <div class="snippet-panel">
                             <pre><code>{{{ snippet }}}</code></pre>
+                            <div class="{{boxClass}}">
+                                <div class="inner-box {{imageClass}}"></div>
+                            </div>
                         </div>
                         <div class="documentation-panel">
                             {{{ documentation }}}