From 399208e90968e52b8336fcc7833fc7c470845602 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakob=20G=C3=B6rgen?= <jakob.gorgen1@gmx.de> Date: Tue, 29 Oct 2024 11:26:29 +0000 Subject: [PATCH] code example: added scalability + some css fixes --- _data/code-example.yml | 19 +++++++++++++++++- _layouts/home.html | 15 ++++++++------ _sass/home.scss | 44 +++++++++++++++++++++--------------------- 3 files changed, 49 insertions(+), 29 deletions(-) diff --git a/_data/code-example.yml b/_data/code-example.yml index af076c6..b01b245 100644 --- a/_data/code-example.yml +++ b/_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() diff --git a/_layouts/home.html b/_layouts/home.html index 560e93b..60f13f9 100644 --- a/_layouts/home.html +++ b/_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); } }); } diff --git a/_sass/home.scss b/_sass/home.scss index 1a034fc..dd0608a 100644 --- a/_sass/home.scss +++ b/_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"; + } } } } -- GitLab