code example: added scalability + some css fixes

_data/code-example.yml

@@ -10,6 +10,23 @@ code-example:
         def run_cmds(self, node: NodeConfig) -> tp.List[str]:
           return ['memcached -u root -t 1 -c 4096']
       ```
+  - ident: scalable
+    feature: 
+      name: Scalable
+      icon: scalable-icon
+      description: SimBricks, is the most scalable platform for full-system virtual prototyping, believe me.
+    code: |
+      ```python
+      am_clients = 255
+      for ip in range(am_clients):
+          client_config = CorundumLinuxNode() 
+          client_config.ip = f'10.0.0.{ip}'
+          client_config.app = PingClient(
+            server_ip=f'10.0.0.{am_clients}', count=10
+          )
+          client = QemuHost(client_config)
+          e.add_host(client)
+      ```
   - ident: full-system
     feature: 
       name: Full-System
@@ -18,7 +35,7 @@ code-example:
     code: |
       ```python
       server_config = I40eLinuxNode()
-      server_config.ip = '10.0.0.2'
+      server_config.ip = f'10.0.0.{am_clients}'
       server_config.app = IdleHost()
       server = Gem5Host(server_config)
       server_nic = I40eNIC()

_layouts/home.html

@@ -92,17 +92,15 @@ layout: base
         <div class="code-section">
           {% for cex in site.data.code-example.code-example %}
           <div class="code" id="{{ cex.ident }}">
-            <pre>
-              {%- capture code -%}{{ cex.code }}{%- endcapture -%}
-              {{ code | markdownify }}
-            </pre>
+            {%- capture code -%}{{ cex.code }}{%- endcapture -%}
+            {{ code | markdownify }}
           </div>
           {% endfor %}
         </div>
         <div class="feature-section">
           {% for cex in site.data.code-example.code-example %}
           <div class="feature" id="{{ cex.ident }}">
-            <h4 class="{{ cex.feature.icon }}">{{ cex.feature.name }}</h4>
+            <div class="{{ cex.feature.icon }}">{{ cex.feature.name }}</div>
             <p>{{ cex.feature.description }}</p>
           </div>
           {% endfor %}
@@ -135,7 +133,12 @@ layout: base
         function set_highlight_all_except_id(id, value) {
           codeElements.forEach(code => {
             if (code.id != id) {
-              c = $($(`#${code.id}`)[0]).css("opacity", value);
+              $($(`#${code.id}.code`)[0]).css("opacity", value);
+            }
+          });
+          featureElements.forEach(feature => {
+            if (feature.id != id) {
+              $($(`#${feature.id}.feature`)[0]).css("opacity", value);
             }
           });
         }

_sass/home.scss

@@ -80,6 +80,7 @@ body.home {
     .learnmore {
       text-align: center;
       font-weight: bold;
+      padding: 20px;
 
       h3,
       a {
@@ -96,22 +97,22 @@ body.home {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
+      align-items: center;
       justify-content: space-between;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      gap: 20px;
+      height: fit-content;
 
       .code-section {
         display: flex;
         flex-direction: column;
         flex-wrap: wrap;
         justify-content: space-between;
-        width: fit-content;
+        width: calc($width/1.6);
+        max-width: 100%;
+        height: fit-content;
         border-radius: $border-radius;
         color: black;
         background-color: $col-os-grey_l2;
         overflow: scroll;
-        max-width: 100%;
 
         .code {
           opacity: 1;
@@ -120,60 +121,59 @@ body.home {
           border-radius: $border-radius;
           padding-left: 10px;
           padding-right: 10px;
-
-          .pre {
-            opacity: 0;
-          }
         }
       }
 
       .feature-section {
         display: flex;
         flex-direction: column;
-        justify-content: space-around;
+        height: fit-content;
+        align-items: center;
         max-width: 100%;
 
         .feature {
-          display: flex;
-          flex-direction: column;
           color: black;
-          font-size: xx-large;
-          padding: 20px;
+          padding: 10px;
           border-radius: $border-radius;
           border: solid 2px;
           border-color: white;
           width: 330px;
           max-width: 90%;
+          height: fit-content;
+          opacity: 1;
 
-          h4 {
+          div {
             font-size: x-large;
             font-weight: bold;
+            height: fit-content;
           }
 
           p {
             font-size: large;
+            height: fit-content;
           }
 
-          h4::before,
-          h4::after {
+          div::before,
+          div::after {
             content: "";
             text-align: center;
             font-family: $font-fa;
             font-weight: bold;
             font-size: x-large;
             color: $col-sb-blu; // $col-sb-org;
-            padding-bottom: -0.1rem;
-            padding-left: 1rem;
             padding-right: 1rem;
+            height: fit-content;
           }
 
-          h4.full-system-icon::before {
+          div.full-system-icon::before {
             content: "\f6ff";
           }
-
-          h4.extensible-icon::before {
+          div.extensible-icon::before {
             content: "\f12e";
           }
+          div.scalable-icon::before {
+            content: "\e4b7";
+          }
         }
       }
     }