User:Layer-09/Sandbox/Infobox Emacs/Content: Difference between revisions

← Older edit Newer edit →

VisualWikitext

@@ Line 1: / Line 1: @@
-<div class="infobox" style="border:1px solid #aaa; width:100%;">
+<div class="nix-wiki infobox" style="
-   <table cellspacing="0" cellpadding="4" style="width:100%;">
+  --infobox-color: rgb(82, 119, 195);
-    <tr>
+  --infobox-background: rgb(242, 248, 253);
-      <th colspan="2" style="background-color:#336699; color:#fff; font-size:120%;">
-        {{{title}}}
+  --infobox-border-color: var(--infobox-color);
-      </th>
+  --infobox-border-radius: 1rem;
-    </tr>
+   --infobox-border-size: 3px;
-    <tr>
-      <td colspan="2" style="text-align:center; padding:4px;">
+  --infobox-title-color: var(--infobox-color);
-        [[File:{{{image}}}|200px|center]]
+  --infobox-title-size: 1rem;
-      </td>
+  --infobox-title-weight: bold;
-    </tr>
+  --infobox-title-align: center;
-     <tr>
-      <td style="font-weight:bold; width:30%;">Developer</td>
+  --infobox-content-size: 90%;
-       <td>{{{developer}}}</td>
+  --infobox-content-padding: {{#if: {{{clip|}}} | calc(var(--infobox-border-radius) / 2) var(--infobox-border-radius) | var(--infobox-border-radius)}};
-     </tr>
+  --infobox-content-title-color: var(--infobox-title-color);
-    <tr>
-      <td style="font-weight:bold;">Initial release</td>
+  --infobox-separator-size: {{#if: {{{clip|}}} | 10px | 0}};
-      <td>{{{initial_release}}}</td>
+  --infobox-separator-clip: {{#if: {{{clip|}}} | polygon(0 0, 100% 100%, 0 100%) | none}};
-    </tr>
-    <tr>
+  --infobox-footer-padding: {{#if: {{{clip|}}} | calc(var(--infobox-border-radius) / 4) var(--infobox-border-radius) | calc(var(--infobox-border-radius) / 2) var(--infobox-border-radius)}};
-      <td style="font-weight:bold;">Latest release</td>
-      <td>Version {{{latest_release_version}}} ({{{latest_release_date}}})</td>
+  border: solid var(--infobox-border-size) var(--infobox-color);
-     </tr>
+  border-radius: var(--infobox-border-radius);
-    <tr>
+  overflow-y: hidden;
-      <td style="font-weight:bold;">Programming language</td>
+">
-      <td>{{{programming_language}}}</td>
+  <!-- Header (title + image) -->
-    </tr>
+  <div class="nix-wiki infobox-header" style="
-    <tr>
+     padding: var(--infobox-content-padding);
-      <td style="font-weight:bold;">Operating system</td>
+  ">
-      <td>{{{operating_system}}}</td>
+    <p class="nix-wiki infobox-title" style="
-     </tr>
+      color: var(--infobox-title-color);
-    <tr>
+      font-size: var(--infobox-title-size);
-       <td style="font-weight:bold;">License</td>
+      font-weight: var(--infobox-title-weight);
-       <td>{{{license}}}</td>
+      text-align: var(--infobox-title-align);
-     </tr>
+       margin-top: 0;
-     <tr>
+    ">{{{title}}}</p>
-      <td colspan="2" style="text-align:center; background-color:#f0f0f0;">
+     <div class="nix-wiki infobox-image">[[File:{{{image}}}]]</div>
-        {{{footer}}}
+  </div>
-      </td>
-    </tr>
+  <!-- Optional “clipped” separator under the header -->
-   </table>
+  <div class="nix-wiki infobox-separator" style="
+    height: var(--infobox-separator-size);
+    width: 100%;
+    background-color: var(--infobox-background);
+     clip-path: var(--infobox-separator-clip);
+  "></div>
+  <!-- Main content area -->
+  <div class="nix-wiki infobox-content" style="
+    padding: var(--infobox-content-padding);
+    background-color: var(--infobox-background);
+    text-align: left;
+    font-size: var(--infobox-content-size);
+  ">
+    {{{content}}}
+  </div>
+  <!-- Optional footer (only if “footer” is nonempty) -->
+  {{#if: {{{footer|}}} |
+     <div style="background-color: var(--infobox-background);">
+       <div class="nix-wiki infobox-separator" style="
+        height: var(--infobox-separator-size);
+        width: 100%;
+        background-color: var(--infobox-color);
+        clip-path: var(--infobox-separator-clip);
+       "></div>
+     </div>
+     <div class="nix-wiki infobox-footer" style="
+      padding: var(--infobox-footer-padding);
+      background-color: var(--infobox-color);
+      color: white;
+      font-weight: bold;
+      text-align: center;
+      font-size: var(--infobox-content-size);
+    ">{{{footer}}}</div>
+   }}
 </div>