computer-playbook/skills/i8-release-article/templates/article.html

<style>
.inf-release {
  --bg-card: #111827;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border-subtle: #1e293b;
  --brand-indigo: #6366f1;
  --brand-purple: #8b5cf6;
  --brand-cyan: #06b6d4;
  --brand-red: #ef4444;

  --gradient-main: linear-gradient(
    135deg,
    var(--brand-indigo),
    var(--brand-purple),
    var(--brand-cyan)
  );

  --gradient-glow: linear-gradient(
    135deg,
    rgba(99,102,241,.15),
    rgba(139,92,246,.15),
    rgba(6,182,212,.15)
  );

  --gradient-alert: linear-gradient(
    135deg,
    rgba(239,68,68,.15),
    rgba(139,92,246,.1)
  );

  color: inherit;
  font: inherit;
  line-height: inherit;

}

.inf-release *,
.inf-release *::before,
.inf-release *::after {
  box-sizing: border-box;
}

.inf-release p {
  color: inherit;
}

.inf-release a {
  color: #7dd3fc;
}

.inf-release strong {
  color: inherit;
}

.inf-release .inf-badge {
  display: inline-block;
  margin: 0 0 1.5rem;
  padding: .4rem 1rem;

  border: 1px solid rgba(99,102,241,.35);
  border-radius: 999px;

  background: var(--gradient-glow);
  color: var(--brand-cyan);

  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.inf-release .inf-intro {
  font-size: 1.08em;
  line-height: 1.7;
}

.inf-release .inf-warning {
  margin: 2rem 0;
  padding: 1.25rem 1.4rem;

  background: var(--gradient-alert);

  border: 1px solid rgba(239,68,68,.35);
  border-radius: 10px;

  color: #fca5a5;
}

.inf-release .inf-warning strong {
  color: #fff;
}

.inf-release .inf-warning a {
  color: #f87171;
}

.inf-release .inf-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;

  margin: 2.5rem 0;
}

.inf-release .inf-card {
  min-width: 0;

  padding: 1.35rem;

  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

.inf-release .inf-card svg {
  display: block;
  width: 28px;
  height: 28px;

  margin-bottom: 1rem;

  color: var(--brand-cyan);
}

.inf-release .inf-card h3 {
  margin: 0 0 .65rem;

  font-size: 1.1rem;
  line-height: 1.3;
}

.inf-release .inf-card p {
  margin: 0;

  color: var(--text-muted);
  font-size: .93rem;
  line-height: 1.55;
}

.inf-release h2 {
  margin-top: 2.8rem;
  margin-bottom: 1rem;
}

.inf-release .inf-heading {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.inf-release .inf-heading::before {
  content: "";

  width: 4px;
  height: 1.25em;

  flex: 0 0 4px;

  border-radius: 3px;
  background: var(--gradient-main);
}

.inf-release .inf-list {
  margin: 1.2rem 0;
  padding: 0;

  list-style: none;
}

.inf-release .inf-list li {
  position: relative;

  margin-bottom: .65rem;
  padding-left: 1.5rem;
}

.inf-release .inf-list li::before {
  content: "✦";

  position: absolute;
  left: 0;

  color: var(--brand-cyan);
}

.inf-release .inf-callout {
  margin: 2.3rem 0;
  padding: 1.5rem;

  background: rgba(17,24,39,.7);

  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--brand-purple);
  border-radius: 10px;
}

.inf-release .inf-callout h3 {
  margin-top: 0;
}

.inf-release code {
  padding: .15em .35em;

  background: rgba(255,255,255,.07);

  border-radius: 4px;

  color: var(--brand-cyan);

  overflow-wrap: anywhere;
}

.inf-release .inf-table-wrap {
  overflow-x: auto;

  margin: 1.5rem 0 2.5rem;

  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.inf-release table {
  width: 100%;
  border-collapse: collapse;

  margin: 0;
}

.inf-release th,
.inf-release td {
  padding: 1rem;

  text-align: left;
  vertical-align: top;

  border-bottom: 1px solid var(--border-subtle);
}

.inf-release th {
  background: rgba(17,24,39,.8);
}

.inf-release tr:last-child td {
  border-bottom: 0;
}

.inf-release .inf-apps {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;

  margin: 1.4rem 0 2.5rem;
}

.inf-release .inf-app {
  display: inline-block;

  padding: .4rem .7rem;

  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 7px;

  font-size: .88rem;
}

.inf-release .inf-cta {
  margin-top: 3rem;
  padding-top: 2rem;

  border-top: 1px solid var(--border-subtle);

  text-align: center;
}

.inf-release .inf-buttons {
  margin-top: 1.5rem;
}

.inf-release .inf-btn {
  display: inline-block;

  margin: .3rem;
  padding: .7rem 1.15rem;

  border: 1px solid var(--border-subtle);
  border-radius: 7px;

  background: var(--bg-card);

  color: inherit !important;

  text-decoration: none;
}

.inf-release .inf-btn-primary {
  border: none;

  background: var(--gradient-main);

  color: #fff !important;
}

@media (max-width: 800px) {
  .inf-release .inf-features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .inf-release .inf-warning,
  .inf-release .inf-callout,
  .inf-release .inf-card {
    padding: 1rem;
  }

  .inf-release .inf-btn {
    display: block;
    margin: .6rem 0;
  }
}
</style>


<div class="inf-release">

  <div class="inf-badge">
    Release {{VERSION}}
  </div>

  <p class="inf-intro">
    {{INTRO}}
  </p>

  <p>
    {{INTRO_MORE}}
  </p>


  <div class="inf-warning">
    🚨 <strong>{{VERSION}} is a major release.</strong>
    {{WARNING}}
    <strong>
      Read <a href="#before-you-upgrade">Before You Upgrade</a> before you deploy.
    </strong>
  </div>


  <div class="inf-features">

    <div class="inf-card">
      <svg fill="none" stroke="currentColor" stroke-width="2"
           stroke-linecap="round" stroke-linejoin="round"
           viewBox="0 0 24 24">
        {{CARD_ICON}}
      </svg>

      <h3>{{CARD_TITLE}}</h3>

      <p>
        {{CARD_TEXT}}
      </p>
    </div>

  </div>


  <h2 class="inf-heading">
    {{SECTION_TITLE}}
  </h2>

  <p>
    {{SECTION_TEXT}}
  </p>

  <p>
    <strong>
      {{LIST_LEAD}}
    </strong>
  </p>

  <ul class="inf-list">
    <li>
      <strong>{{ITEM_LEAD}}:</strong> {{ITEM_TEXT}}
    </li>
  </ul>


  <div class="inf-callout">

    <h3>{{CALLOUT_TITLE}}</h3>

    <p>
      {{CALLOUT_TEXT}}
    </p>

    <ul class="inf-list">
      <li>
        <strong>{{ITEM_LEAD}}:</strong>
        {{ITEM_TEXT}}
      </li>
    </ul>

  </div>


  <h2 id="before-you-upgrade" class="inf-heading">
    Before You Upgrade
  </h2>

  <p>
    {{UPGRADE_LEAD}}
  </p>

  <div class="inf-table-wrap">
    <table>
      <thead>
        <tr>
          <th>If you…</th>
          <th>Then…</th>
        </tr>
      </thead>

      <tbody>

        <tr>
          <td><strong>{{IF_YOU}}</strong></td>
          <td>
            {{THEN}}
          </td>
        </tr>

      </tbody>
    </table>
  </div>


  <h2 class="inf-heading">
    More Reliable
  </h2>

  <ul class="inf-list">
    <li>
      <strong>{{FIX_LEAD}}:</strong>
      {{FIX_TEXT}}
    </li>
  </ul>


  <h2 class="inf-heading">
    Updated Applications
  </h2>

  <div class="inf-apps">
    <span class="inf-app">{{APP}} {{APP_VERSION}}</span>
  </div>


  <div class="inf-cta">

    <h2>{{CLOSING_TITLE}}</h2>

    <p>
      {{CLOSING_TEXT}}
    </p>

    <div class="inf-buttons">

      <a
        href="https://s.infinito.nexus/changelog"
        class="inf-btn inf-btn-primary"
        target="_blank"
        rel="noopener"
      >
        Full {{RELEASE_TAG}} Changelog
      </a>

      <a
        href="https://github.com/infinito-nexus/core"
        class="inf-btn"
        target="_blank"
        rel="noopener"
      >
        GitHub Repository
      </a>

      <a
        href="https://cybermaster.space/"
        class="inf-btn"
        target="_blank"
        rel="noopener"
      >
        Contact Infinito.Nexus Team
      </a>

    </div>

  </div>

</div>