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