Radish alpha
r
radicle.xyz
rad:z371PVmDHdjJucejRoRYJcDEvD5pp
Radicle website including documentation and guides
Radicle
Git
Commits › 0d23274
Tidy up the layouts and pages
Alexis Sellier committed 2 years ago
commit 0d23274e582c0e86decf2c17321bb1b90612a4e3
parent be359ed
11 files changed +900 -905
modified _guides/seeder.md
@@ -27,7 +27,7 @@ In Radicle, while all users contribute to the network by seeding data, the term
internet and hosts content for peers. Seed nodes need to remain online and

accessible to provide their service to the network.
- 
### The Need for Seed Nodes
+ 
### The need for seed nodes



While a peer-to-peer network without seed nodes is feasible, it is impractical.

This is because regular "user" nodes go online and offline all the time, so
modified _includes/meta.html
@@ -1,6 +1,11 @@
- 
<title key="title">Radicle: sovereign code infrastructure</title>
+ 
<title>
+ 
  {% if page.title %}
+ 
    {{ page.title }}
+ 
  {% else %}
+ 
    {{ site.title }}
+ 
  {% endif %}
+ 
</title>

<link rel="shortcut icon" href="/assets/images/radicle.svg"/>
- 
<link rel="stylesheet" type="text/css" href="/index.css"/>

<link rel="canonical" href="https://radicle.xyz"/>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<meta name="description" content="Radicle is a decentralized platform for code collaboration, offering secure and sovereign infrastructure for developers.">
modified _layouts/guide.html
@@ -1,21 +1,8 @@
<!DOCTYPE html>

<html lang="{{ site.lang | default: "en-US" }}">

  <head>
- 
    <title>
- 
      {% if page.title %}
- 
        {{ page.title }}
- 
      {% else %}
- 
        {{ site.title }}
- 
      {% endif %}
- 
    </title>
- 
    <meta name="viewport" content="width=device-width, initial-scale=1">
- 
    <meta charset="utf-8">
- 
    <meta name="twitter:site" content="@radicle" />
- 
    <meta name="twitter:creator" content="@radicle" />
- 
    <link rel="shortcut icon" href="/assets/images/radicle.svg"/>
- 
    <link rel="stylesheet" href="{{ "/assets/css/fonts.css" | relative_url }}">
- 
    <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
- 
    <link rel="stylesheet" href="{{ "/assets/css/monokai.css" | relative_url }}">
+ 
    {% include meta.html %}
+ 
    <link rel="stylesheet" type="text/css" href="{{ "/assets/css/guide.css" | relative_url }}"/>

  </head>

  <body>

    <header>
deleted _layouts/home.html
@@ -1,48 +0,0 @@
- 
<!doctype html>
- 
<html>
- 
<head>
- 
  {% include meta.html %}
- 
</head>
- 
<body>
- 
  <img width="160" height="160" id="ribbon" src="/assets/images/ribbon.svg" usemap="#ribbon-map"/>
- 
  <map name="ribbon-map">
- 
    <area shape="poly" coords="10,0,55,0,160,95,160,160,10,0" href="https://app.radicle.xyz/nodes/seed.radicle.xyz/rad:z3gqcJUoA1n9HaHKufZs5FCSGazv5" target="_blank">
- 
  </map>
- 
  {% include header.html %}
- 
  <main>
- 
    <p>
- 
      <strong class="highlight">Radicle</strong> is a sovereign
- 
      <span id="definition">{code forge}</span> built on Git.
- 
    </p>
- 
    <nav>
- 
      <span class="cta">
- 
        <a class="button filled" href="#get-started">Get started ↓</a>
- 
        <a class="button filled secondary" href="/guides/seeder">Run a seed &rarr;</a>
- 
      </span>
- 
      <span class="links">
- 
        <a href="/guides">Guides</a>
- 
        <a href="/faq">FAQ</a>
- 
        <a href="https://radicle.zulipchat.com" target="_blank">Community</a>
- 
        <a href="https://twitter.com/radicle" target="_blank">Tweets</a>
- 
      </span>
- 
    </nav>
- 
    {{ content }}
- 
  </main>
- 
  {% include footer.html %}
- 
  <script src="{{ "/assets/js/toggle-theme.js" | relative_url }}"></script>
- 
  <script>
- 
    const copyButton = document.getElementById("install");
- 
    const copyResult = document.getElementById("install-copy");
- 
    const textToCopy = document.getElementById("install-command").innerText;
-
- 
    copyButton.addEventListener("click", async function () {
- 
      try {
- 
        await navigator.clipboard.writeText(textToCopy);
- 
        copyResult.innerText = "copied";
- 
      } catch (err) {
- 
        console.error("Failed to copy text: ", err);
- 
      }
- 
    });
- 
  </script>
- 
</body>
- 
</html>
added _layouts/index.html
@@ -0,0 +1,49 @@
+ 
<!doctype html>
+ 
<html>
+ 
<head>
+ 
  {% include meta.html %}
+ 
  <link rel="stylesheet" type="text/css" href="{{ "/assets/css/page.css" | relative_url }}"/>
+ 
</head>
+ 
<body>
+ 
  <img width="160" height="160" id="ribbon" src="/assets/images/ribbon.svg" usemap="#ribbon-map"/>
+ 
  <map name="ribbon-map">
+ 
    <area shape="poly" coords="10,0,55,0,160,95,160,160,10,0" href="https://app.radicle.xyz/nodes/seed.radicle.xyz/rad:z3gqcJUoA1n9HaHKufZs5FCSGazv5" target="_blank">
+ 
  </map>
+ 
  {% include header.html %}
+ 
  <main>
+ 
    <p>
+ 
      <strong class="highlight">Radicle</strong> is a sovereign
+ 
      <span id="definition">{code forge}</span> built on Git.
+ 
    </p>
+ 
    <nav>
+ 
      <span class="cta">
+ 
        <a class="button filled" href="#get-started">Get started ↓</a>
+ 
        <a class="button filled secondary" href="/guides/seeder">Run a seed &rarr;</a>
+ 
      </span>
+ 
      <span class="links">
+ 
        <a href="/guides">Guides</a>
+ 
        <a href="/faq">FAQ</a>
+ 
        <a href="https://radicle.zulipchat.com" target="_blank">Community</a>
+ 
        <a href="https://twitter.com/radicle" target="_blank">Tweets</a>
+ 
      </span>
+ 
    </nav>
+ 
    {{ content }}
+ 
  </main>
+ 
  {% include footer.html %}
+ 
  <script src="{{ "/assets/js/toggle-theme.js" | relative_url }}"></script>
+ 
  <script>
+ 
    const copyButton = document.getElementById("install");
+ 
    const copyResult = document.getElementById("install-copy");
+ 
    const textToCopy = document.getElementById("install-command").innerText;
+
+ 
    copyButton.addEventListener("click", async function () {
+ 
      try {
+ 
        await navigator.clipboard.writeText(textToCopy);
+ 
        copyResult.innerText = "copied";
+ 
      } catch (err) {
+ 
        console.error("Failed to copy text: ", err);
+ 
      }
+ 
    });
+ 
  </script>
+ 
</body>
+ 
</html>
modified _layouts/page.html
@@ -2,6 +2,7 @@
<html>

<head>

  {% include meta.html %}
+ 
  <link rel="stylesheet" type="text/css" href="{{ "/assets/css/page.css" | relative_url }}"/>

</head>

<body>

  {% include header.html %}
added assets/css/guide.css
@@ -0,0 +1,468 @@
+ 
@charset "utf-8";
+ 
@import "/assets/css/common.css";
+ 
@import "/assets/css/fonts.css";
+ 
@import "/assets/css/monokai.css";
+
+ 
main, footer {
+ 
  display: grid;
+ 
  grid-column-gap: 2rem;
+ 
  grid-auto-flow: row;
+ 
  grid-template-columns:
+ 
    [screen-start] 1fr
+ 
    [page-start kicker-start left-start] 6rem 6rem
+ 
    [text-start kicker-end] 2rem 3rem 6rem 3rem
+ 
    [left-end right-start] 3rem [text-middle] 3rem 6rem 2rem
+ 
    [text-end gutter-start] 6rem 6rem
+ 
    [page-end gutter-end right-end] 1fr [screen-end];
+ 
  grid-template-rows: auto [last-row];
+ 
}
+
+ 
main {
+ 
  align-items: first baseline;
+ 
  padding-bottom: 8rem;
+ 
}
+
+ 
header, footer {
+ 
  font-weight: 300;
+ 
}
+
+ 
header {
+ 
  display: flex;
+ 
  background-color: var(--color-bg-default);
+ 
  padding: 1rem 1.5rem;
+ 
  align-items: center;
+ 
  justify-content: space-between;
+ 
}
+
+ 
footer {
+ 
  padding-bottom: 3rem;
+ 
  color: var(--color-fg-dim);
+ 
}
+
+ 
footer p {
+ 
  font-size: var(--font-size-tiny);
+ 
  display: block;
+ 
  text-align: left;
+ 
  grid-column: text;
+ 
}
+
+ 
nav {
+ 
  display: grid;
+ 
  grid-column: right;
+ 
  grid-auto-flow: column;
+ 
  grid-gap: 1.5rem;
+ 
  align-items: stretch;
+ 
  justify-self: end;
+ 
  text-transform: uppercase;
+ 
}
+
+ 
header a {
+ 
  display: flex;
+ 
  align-items: center;
+ 
}
+
+ 
main > *, footer > * {
+ 
  grid-column: text;
+ 
}
+
+ 
footer > *:last-child {
+ 
  margin-bottom: 0;
+ 
}
+
+ 
strong {
+ 
  font-weight: 600;
+ 
}
+
+ 
h1 {
+ 
  font-size: var(--font-size-xx-large);
+ 
  font-weight: var(--font-weight-semibold);
+ 
  margin: 4rem 0 0.5rem;
+ 
  line-height: 1.25;
+ 
}
+
+ 
h2 {
+ 
  font-size: var(--font-size-x-large);
+ 
  font-weight: var(--font-weight-semibold);
+ 
  margin: 3.75rem 0 1.5rem;
+ 
  padding-bottom: 1rem;
+ 
  border-bottom: 1px solid var(--color-fill-separator);
+ 
}
+
+ 
h3 {
+ 
  font-size: var(--font-size-large);
+ 
  font-weight: var(--font-weight-semibold);
+ 
  margin: 2rem 0 1.5rem;
+ 
}
+
+ 
h4 {
+ 
  font-size: var(--font-size-medium);
+ 
  font-weight: var(--font-weight-semibold);
+ 
  margin: 1.5rem 0 1rem;
+ 
}
+
+ 
h5 {
+ 
  font-size: var(--font-size-small);
+ 
  font-weight: var(--font-weight-semibold);
+ 
  margin: 1rem 0 0.25rem;
+ 
}
+
+ 
pre, code {
+ 
  color: var(--color-fg-low-contrast);
+ 
  font-family: var(--font-family-code);
+ 
}
+
+ 
pre {
+ 
  background-color: var(--color-bg-highlight);
+ 
  overflow-x: scroll;
+ 
  font-size: 0.875rem;
+ 
  border-radius: 4px;
+ 
  padding: 1rem;
+ 
  margin: 0;
+ 
}
+
+ 
pre code {
+ 
  padding: 0;
+ 
}
+
+ 
pre.center {
+ 
  text-align: center;
+ 
}
+
+ 
p code, ul code, ol code, aside code {
+ 
  padding: 1px 4px;
+ 
  border-radius: 2px;
+ 
  word-spacing: -2px;
+ 
  background-color: var(--color-fill-separator);
+ 
}
+
+ 
strong code {
+ 
  font-weight: 600 !important;
+ 
}
+
+ 
p code {
+ 
  font-weight: 400;
+ 
}
+
+ 
aside code {
+ 
  font-weight: normal;
+ 
}
+
+ 
table {
+ 
  font-size: 0.875rem;
+ 
  border-collapse: collapse;
+ 
  background-color: var(--color-bg-highlight);
+ 
}
+
+ 
table td:first-child {
+ 
  white-space: nowrap;
+ 
  padding-right: 1rem;
+ 
}
+
+ 
table td {
+ 
  vertical-align: top;
+ 
  padding: 0.5rem;
+ 
}
+
+ 
table th {
+ 
  font-size: var(--font-size-small);
+ 
  font-weight: var(--font-weight-regular);
+ 
  background-color: var(--color-fill-separator);
+ 
  padding: 0.5rem;
+ 
  text-align: left;
+ 
}
+
+ 
table tr {
+ 
  border-bottom: 1px solid var(--color-fill-separator);
+ 
}
+
+ 
table tr:last-child {
+ 
  border-bottom: none;
+ 
}
+
+ 
table code {
+ 
  font-weight: normal;
+ 
}
+
+ 
p:last-child {
+ 
  margin-bottom: 0;
+ 
}
+
+ 
p + blockquote {
+ 
  margin-top: 1rem;
+ 
}
+ 
blockquote + p {
+ 
  margin-top: 1rem;
+ 
}
+
+ 
blockquote {
+ 
  color: var(--color-fg-contrast);
+ 
  background: var(--color-bg-highlight);
+ 
  padding: 1rem;
+ 
  margin: 1rem 0;
+ 
  border-left: 2px solid var(--color-border-focus);
+ 
}
+
+ 
blockquote pre {
+ 
  background-color: var(--color-fill-separator);
+ 
}
+
+ 
.title {
+ 
  align-items: stretch;
+ 
  justify-self: start;
+ 
}
+
+ 
.title img {
+ 
  width: 1.75rem;
+ 
  height: 1.75rem;
+ 
}
+
+ 
.title span {
+ 
  color: var(--color-fg-low-contrast);
+ 
  margin-left: 0.5rem;
+ 
}
+
+ 
.title:hover span {
+ 
  text-decoration: underline;
+ 
}
+
+ 
.toc + hr {
+ 
  margin-bottom: 3rem;
+ 
}
+
+ 
.first {
+ 
  margin-top: 60px;
+ 
}
+
+ 
.subtitle {
+ 
  font-size: 1.125rem;
+ 
  color: var(--color-fg-dim);
+ 
  margin: 0 0 3rem;
+ 
}
+
+ 
main figure, main img {
+ 
  margin: 1rem 0 2rem 0;
+ 
}
+
+ 
main img, main object {
+ 
  margin: 0;
+ 
  padding: 0;
+ 
  border: 0;
+ 
  outline: none;
+ 
}
+
+ 
main img.placeholder {
+ 
  width: 100%;
+ 
  height: 8rem;
+ 
  border: none !important;
+ 
  outline: none !important;
+ 
  background: var(--color-bg-highlight) !important;
+ 
}
+
+ 
figure {
+ 
  width: 100%;
+ 
}
+
+ 
figure pre {
+ 
  margin: 0;
+ 
}
+
+ 
figure img, figure object {
+ 
  display: block;
+ 
  margin: 0 auto;
+ 
}
+
+ 
figure object + figcaption {
+ 
  margin-top: 1rem;
+ 
}
+
+ 
figure.diagram {
+ 
  grid-column-start: kicker-start;
+ 
  grid-column-end: gutter-end;
+ 
}
+
+ 
figure.diagram.tall {
+ 
  grid-column-start: text-start;
+ 
  grid-column-end: text-end;
+ 
}
+
+ 
figcaption {
+ 
  margin-top: 0.5rem;
+ 
  width: 100%;
+ 
  white-space: nowrap;
+ 
  overflow-x: hidden;
+ 
  text-align: center;
+ 
  text-overflow: ellipsis;
+ 
}
+
+ 
aside {
+ 
  grid-column: gutter;
+ 
}
+
+ 
aside.span-2 {
+ 
  grid-row: span 2;
+ 
}
+ 
aside.span-3 {
+ 
  grid-row: span 3;
+ 
}
+ 
aside.span-4 {
+ 
  grid-row: span 4;
+ 
}
+ 
aside.span-5 {
+ 
  grid-row: span 5;
+ 
}
+
+ 
aside p {
+ 
  margin-bottom: 1em;
+ 
}
+
+ 
aside.kicker {
+ 
  grid-column: kicker;
+ 
}
+
+ 
aside.diagram {
+ 
  margin-top: 1.5rem;
+ 
}
+
+ 
figcaption, aside {
+ 
  font-size: 0.75rem;
+ 
  line-height: 1.5;
+ 
  color: var(--color-fg-dim);
+ 
}
+
+ 
a {
+ 
  color: unset;
+ 
  text-decoration: unset;
+ 
}
+
+ 
p a {
+ 
  border-bottom: 1px solid var(--color-fg-dim);
+ 
}
+ 
p a:hover {
+ 
  border-bottom-color: var(--color-fg-contrast);
+ 
}
+
+ 
p, ol, ul, table, pre {
+ 
  margin: 0 0 1rem;
+ 
}
+
+ 
ol, ul {
+ 
  padding-left: 2rem;
+ 
}
+
+ 
li {
+ 
  padding-left: 0.5rem;
+ 
}
+
+ 
hr {
+ 
  grid-column: screen;
+ 
  width: 100%;
+ 
  border: none;
+ 
  border-top: 1px solid var(--color-fill-separator);
+ 
  margin: 0;
+ 
}
+
+ 
span.highlight {
+ 
  color: var(--color-fg-emphasized);
+ 
}
+
+ 
span.highlight-secondary {
+ 
  color: var(--color-fg-highlight-secondary);
+ 
}
+
+ 
.banner {
+ 
  border-radius: 4px;
+ 
  width: 100%;
+ 
}
+
+ 
.button {
+ 
  color: var(--color-fill-secondary);
+ 
  font-weight: normal;
+ 
  padding: 1rem 2rem;
+ 
  border: 1px solid var(--color-fill-secondary);
+ 
  border-radius: 4px;
+ 
}
+ 
.button:hover {
+ 
  color: white;
+ 
  background-color: var(--color-fill-secondary);
+ 
}
+
+ 
.toc {
+ 
  display: flex;
+ 
  flex-direction: column;
+ 
  flex-wrap: wrap;
+ 
  gap: 1rem;
+ 
  font-size: 0.75rem !important;
+ 
  margin: 2rem 0 3rem 0;
+ 
  padding: 0;
+ 
  max-height: 16rem;
+ 
}
+
+ 
.toc a {
+ 
  border-bottom-width: 1px;
+ 
  border-bottom-style: none;
+ 
}
+ 
.toc a:hover {
+ 
  border-bottom-style: solid;
+ 
}
+
+ 
.toc code {
+ 
  font-size: 0.75rem;
+ 
}
+
+ 
.toc li, .toc ul {
+ 
  padding: 0;
+ 
  margin: 0;
+ 
  list-style-type: none;
+ 
}
+
+ 
.toc-h2 > a {
+ 
  font-weight: bold !important;
+ 
}
+ 
.toc-h2 > ul {
+ 
  margin-left: 0.5rem;
+ 
}
+ 
.toc-h3 > ul {
+ 
  margin-left: 1rem;
+ 
}
+ 
.toc-h3 > a, .toc-h4 > a, .tok-h5 > a {
+ 
  color: var(--color-fg-dim);
+ 
}
+
+ 
.poem {
+ 
  font-style: italic;
+ 
  font-size: 0.75rem;
+ 
  grid-column-start: text-start;
+ 
  grid-column-end: text-middle;
+ 
  margin-bottom: 1rem;
+ 
  padding-left: 2rem;
+ 
}
+
+ 
@media (max-width: 1280px) {
+ 
  main, footer {
+ 
    grid-column-gap: 1.25rem;
+ 
  }
+ 
}
+
+ 
@media (max-width: 1024px) {
+ 
  aside, .poem {
+ 
    display: none;
+ 
  }
+
+ 
  main, header, footer {
+ 
    padding-left: 1rem;
+ 
    padding-right: 1rem;
+ 
  }
+ 
  main, footer {
+ 
    max-width: 720px;
+ 
    margin: 0 auto;
+ 
    grid-template-columns:
+ 
      [screen-start page-start text-start] 100% [page-end text-end screen-end];
+ 
  }
+
+ 
  figure.diagram {
+ 
    grid-column: screen !important;
+ 
  }
+ 
  figure.diagram object {
+ 
    width: 100%;
+ 
  }
+ 
}
deleted assets/css/main.css
@@ -1,467 +0,0 @@
- 
@charset "utf-8";
- 
@import "/assets/css/common.css";
- 
@import "/assets/css/fonts.css";
-
- 
main, footer {
- 
  display: grid;
- 
  grid-column-gap: 2rem;
- 
  grid-auto-flow: row;
- 
  grid-template-columns:
- 
    [screen-start] 1fr
- 
    [page-start kicker-start left-start] 6rem 6rem
- 
    [text-start kicker-end] 2rem 3rem 6rem 3rem
- 
    [left-end right-start] 3rem [text-middle] 3rem 6rem 2rem
- 
    [text-end gutter-start] 6rem 6rem
- 
    [page-end gutter-end right-end] 1fr [screen-end];
- 
  grid-template-rows: auto [last-row];
- 
}
-
- 
main {
- 
  align-items: first baseline;
- 
  padding-bottom: 8rem;
- 
}
-
- 
header, footer {
- 
  font-weight: 300;
- 
}
-
- 
header {
- 
  display: flex;
- 
  background-color: var(--color-bg-default);
- 
  padding: 1rem 1.5rem;
- 
  align-items: center;
- 
  justify-content: space-between;
- 
}
-
- 
footer {
- 
  padding-bottom: 3rem;
- 
  color: var(--color-fg-dim);
- 
}
-
- 
footer p {
- 
  font-size: var(--font-size-tiny);
- 
  display: block;
- 
  text-align: left;
- 
  grid-column: text;
- 
}
-
- 
nav {
- 
  display: grid;
- 
  grid-column: right;
- 
  grid-auto-flow: column;
- 
  grid-gap: 1.5rem;
- 
  align-items: stretch;
- 
  justify-self: end;
- 
  text-transform: uppercase;
- 
}
-
- 
header a {
- 
  display: flex;
- 
  align-items: center;
- 
}
-
- 
main > *, footer > * {
- 
  grid-column: text;
- 
}
-
- 
footer > *:last-child {
- 
  margin-bottom: 0;
- 
}
-
- 
strong {
- 
  font-weight: 600;
- 
}
-
- 
h1 {
- 
  font-size: var(--font-size-xx-large);
- 
  font-weight: var(--font-weight-semibold);
- 
  margin: 4rem 0 0.5rem;
- 
  line-height: 1.25;
- 
}
-
- 
h2 {
- 
  font-size: var(--font-size-x-large);
- 
  font-weight: var(--font-weight-semibold);
- 
  margin: 3.75rem 0 1.5rem;
- 
  padding-bottom: 1rem;
- 
  border-bottom: 1px solid var(--color-fill-separator);
- 
}
-
- 
h3 {
- 
  font-size: var(--font-size-large);
- 
  font-weight: var(--font-weight-semibold);
- 
  margin: 2rem 0 1.5rem;
- 
}
-
- 
h4 {
- 
  font-size: var(--font-size-medium);
- 
  font-weight: var(--font-weight-semibold);
- 
  margin: 1.5rem 0 1rem;
- 
}
-
- 
h5 {
- 
  font-size: var(--font-size-small);
- 
  font-weight: var(--font-weight-semibold);
- 
  margin: 1rem 0 0.25rem;
- 
}
-
- 
pre, code {
- 
  color: var(--color-fg-low-contrast);
- 
  font-family: var(--font-family-code);
- 
}
-
- 
pre {
- 
  background-color: var(--color-bg-highlight);
- 
  overflow-x: scroll;
- 
  font-size: 0.875rem;
- 
  border-radius: 4px;
- 
  padding: 1rem;
- 
  margin: 0;
- 
}
-
- 
pre code {
- 
  padding: 0;
- 
}
-
- 
pre.center {
- 
  text-align: center;
- 
}
-
- 
p code, ul code, ol code, aside code {
- 
  padding: 1px 4px;
- 
  border-radius: 2px;
- 
  word-spacing: -2px;
- 
  background-color: var(--color-fill-separator);
- 
}
-
- 
strong code {
- 
  font-weight: 600 !important;
- 
}
-
- 
p code {
- 
  font-weight: 400;
- 
}
-
- 
aside code {
- 
  font-weight: normal;
- 
}
-
- 
table {
- 
  font-size: 0.875rem;
- 
  border-collapse: collapse;
- 
  background-color: var(--color-bg-highlight);
- 
}
-
- 
table td:first-child {
- 
  white-space: nowrap;
- 
  padding-right: 1rem;
- 
}
-
- 
table td {
- 
  vertical-align: top;
- 
  padding: 0.5rem;
- 
}
-
- 
table th {
- 
  font-size: var(--font-size-small);
- 
  font-weight: var(--font-weight-regular);
- 
  background-color: var(--color-fill-separator);
- 
  padding: 0.5rem;
- 
  text-align: left;
- 
}
-
- 
table tr {
- 
  border-bottom: 1px solid var(--color-fill-separator);
- 
}
-
- 
table tr:last-child {
- 
  border-bottom: none;
- 
}
-
- 
table code {
- 
  font-weight: normal;
- 
}
-
- 
p:last-child {
- 
  margin-bottom: 0;
- 
}
-
- 
p + blockquote {
- 
  margin-top: 1rem;
- 
}
- 
blockquote + p {
- 
  margin-top: 1rem;
- 
}
-
- 
blockquote {
- 
  color: var(--color-fg-contrast);
- 
  background: var(--color-bg-highlight);
- 
  padding: 1rem;
- 
  margin: 1rem 0;
- 
  border-left: 2px solid var(--color-border-focus);
- 
}
-
- 
blockquote pre {
- 
  background-color: var(--color-fill-separator);
- 
}
-
- 
.title {
- 
  align-items: stretch;
- 
  justify-self: start;
- 
}
-
- 
.title img {
- 
  width: 1.75rem;
- 
  height: 1.75rem;
- 
}
-
- 
.title span {
- 
  color: var(--color-fg-low-contrast);
- 
  margin-left: 0.5rem;
- 
}
-
- 
.title:hover span {
- 
  text-decoration: underline;
- 
}
-
- 
.toc + hr {
- 
  margin-bottom: 3rem;
- 
}
-
- 
.first {
- 
  margin-top: 60px;
- 
}
-
- 
.subtitle {
- 
  font-size: 1.125rem;
- 
  color: var(--color-fg-dim);
- 
  margin: 0 0 3rem;
- 
}
-
- 
main figure, main img {
- 
  margin: 1rem 0 2rem 0;
- 
}
-
- 
main img, main object {
- 
  margin: 0;
- 
  padding: 0;
- 
  border: 0;
- 
  outline: none;
- 
}
-
- 
main img.placeholder {
- 
  width: 100%;
- 
  height: 8rem;
- 
  border: none !important;
- 
  outline: none !important;
- 
  background: var(--color-bg-highlight) !important;
- 
}
-
- 
figure {
- 
  width: 100%;
- 
}
-
- 
figure pre {
- 
  margin: 0;
- 
}
-
- 
figure img, figure object {
- 
  display: block;
- 
  margin: 0 auto;
- 
}
-
- 
figure object + figcaption {
- 
  margin-top: 1rem;
- 
}
-
- 
figure.diagram {
- 
  grid-column-start: kicker-start;
- 
  grid-column-end: gutter-end;
- 
}
-
- 
figure.diagram.tall {
- 
  grid-column-start: text-start;
- 
  grid-column-end: text-end;
- 
}
-
- 
figcaption {
- 
  margin-top: 0.5rem;
- 
  width: 100%;
- 
  white-space: nowrap;
- 
  overflow-x: hidden;
- 
  text-align: center;
- 
  text-overflow: ellipsis;
- 
}
-
- 
aside {
- 
  grid-column: gutter;
- 
}
-
- 
aside.span-2 {
- 
  grid-row: span 2;
- 
}
- 
aside.span-3 {
- 
  grid-row: span 3;
- 
}
- 
aside.span-4 {
- 
  grid-row: span 4;
- 
}
- 
aside.span-5 {
- 
  grid-row: span 5;
- 
}
-
- 
aside p {
- 
  margin-bottom: 1em;
- 
}
-
- 
aside.kicker {
- 
  grid-column: kicker;
- 
}
-
- 
aside.diagram {
- 
  margin-top: 1.5rem;
- 
}
-
- 
figcaption, aside {
- 
  font-size: 0.75rem;
- 
  line-height: 1.5;
- 
  color: var(--color-fg-dim);
- 
}
-
- 
a {
- 
  color: unset;
- 
  text-decoration: unset;
- 
}
-
- 
p a {
- 
  border-bottom: 1px solid var(--color-fg-dim);
- 
}
- 
p a:hover {
- 
  border-bottom-color: var(--color-fg-contrast);
- 
}
-
- 
p, ol, ul, table, pre {
- 
  margin: 0 0 1rem;
- 
}
-
- 
ol, ul {
- 
  padding-left: 2rem;
- 
}
-
- 
li {
- 
  padding-left: 0.5rem;
- 
}
-
- 
hr {
- 
  grid-column: screen;
- 
  width: 100%;
- 
  border: none;
- 
  border-top: 1px solid var(--color-fill-separator);
- 
  margin: 0;
- 
}
-
- 
span.highlight {
- 
  color: var(--color-fg-emphasized);
- 
}
-
- 
span.highlight-secondary {
- 
  color: var(--color-fg-highlight-secondary);
- 
}
-
- 
.banner {
- 
  border-radius: 4px;
- 
  width: 100%;
- 
}
-
- 
.button {
- 
  color: var(--color-fill-secondary);
- 
  font-weight: normal;
- 
  padding: 1rem 2rem;
- 
  border: 1px solid var(--color-fill-secondary);
- 
  border-radius: 4px;
- 
}
- 
.button:hover {
- 
  color: white;
- 
  background-color: var(--color-fill-secondary);
- 
}
-
- 
.toc {
- 
  display: flex;
- 
  flex-direction: column;
- 
  flex-wrap: wrap;
- 
  gap: 1rem;
- 
  font-size: 0.75rem !important;
- 
  margin: 2rem 0 3rem 0;
- 
  padding: 0;
- 
  max-height: 16rem;
- 
}
-
- 
.toc a {
- 
  border-bottom-width: 1px;
- 
  border-bottom-style: none;
- 
}
- 
.toc a:hover {
- 
  border-bottom-style: solid;
- 
}
-
- 
.toc code {
- 
  font-size: 0.75rem;
- 
}
-
- 
.toc li, .toc ul {
- 
  padding: 0;
- 
  margin: 0;
- 
  list-style-type: none;
- 
}
-
- 
.toc-h2 > a {
- 
  font-weight: bold !important;
- 
}
- 
.toc-h2 > ul {
- 
  margin-left: 0.5rem;
- 
}
- 
.toc-h3 > ul {
- 
  margin-left: 1rem;
- 
}
- 
.toc-h3 > a, .toc-h4 > a, .tok-h5 > a {
- 
  color: var(--color-fg-dim);
- 
}
-
- 
.poem {
- 
  font-style: italic;
- 
  font-size: 0.75rem;
- 
  grid-column-start: text-start;
- 
  grid-column-end: text-middle;
- 
  margin-bottom: 1rem;
- 
  padding-left: 2rem;
- 
}
-
- 
@media (max-width: 1280px) {
- 
  main, footer {
- 
    grid-column-gap: 1.25rem;
- 
  }
- 
}
-
- 
@media (max-width: 1024px) {
- 
  aside, .poem {
- 
    display: none;
- 
  }
-
- 
  main, header, footer {
- 
    padding-left: 1rem;
- 
    padding-right: 1rem;
- 
  }
- 
  main, footer {
- 
    max-width: 720px;
- 
    margin: 0 auto;
- 
    grid-template-columns:
- 
      [screen-start page-start text-start] 100% [page-end text-end screen-end];
- 
  }
-
- 
  figure.diagram {
- 
    grid-column: screen !important;
- 
  }
- 
  figure.diagram object {
- 
    width: 100%;
- 
  }
- 
}
added assets/css/page.css
@@ -0,0 +1,370 @@
+ 
@charset "utf-8";
+ 
@import "/assets/css/common.css";
+ 
@import "/assets/css/fonts.css";
+
+ 
body {
+ 
  line-height: 1.4;
+ 
  max-width: 100%;
+ 
  height: 100%;
+ 
}
+
+ 
body, h1, h2, h3, h4, h5, p, table {
+ 
  font-size: 1rem;
+ 
  font-family: var(--font-family-code-alt);
+ 
}
+
+ 
h1, h2 {
+ 
  font-weight: bold;
+ 
  color: var(--color-fg-highlight-tertiary);
+ 
}
+
+ 
h1 {
+ 
  padding: 0.125rem;
+ 
  margin-top: 2rem;
+ 
  text-transform: uppercase;
+ 
}
+
+ 
h2 {
+ 
  margin-left: 1rem;
+ 
}
+
+ 
h2::after {
+ 
  margin-left: 0.5rem;
+ 
  display: inline-block;
+ 
  width: 16px;
+ 
  height: 16px;
+ 
  background-size: 16px 16px;
+ 
  vertical-align: text-bottom;
+ 
}
+
+ 
h2#unparalleled-autonomy:after {
+ 
  background-image: url(/assets/images/radicle.svg);
+ 
  filter: brightness(200%) hue-rotate(160deg);
+ 
  content: "";
+ 
}
+
+ 
h2#modular-by-design:after {
+ 
  background-image: url(/assets/images/puzzle.svg);
+ 
  content: "";
+ 
}
+
+ 
h2#local-first::after {
+ 
  background-image: url(/assets/images/cabin.svg);
+ 
  filter: brightness(130%);
+ 
  content: "";
+ 
}
+
+ 
h2#your-data-forever-and-secure::after {
+ 
  background-image: url(/assets/images/key.svg);
+ 
  content: "";
+ 
}
+
+ 
h2#evolvable--extensible::after {
+ 
  background-image: url(/assets/images/p2p.svg);
+ 
  content: "";
+ 
}
+
+ 
p, ul, nav, pre, #install {
+ 
  margin-left: 2rem;
+ 
}
+
+ 
hr {
+ 
  border: none;
+ 
  border-bottom: 1px solid var(--color-border-hint);
+ 
  margin: 2rem 0;
+ 
}
+
+ 
ul {
+ 
  list-style-position: inside;
+ 
  padding-left: 0;
+ 
}
+
+ 
ul li {
+ 
  margin-left: 0;
+ 
}
+ 
ul li::marker {
+ 
  content: "* ";
+ 
}
+
+ 
blockquote {
+ 
  padding: 0 1rem;
+ 
  margin-left: 2rem;
+ 
  border-left: 1px solid var(--color-border-hint);
+ 
}
+ 
blockquote p {
+ 
  margin: 0;
+ 
}
+
+ 
code {
+ 
  font-family: var(--font-family-code-alt);
+ 
  color: var(--color-fg-low-contrast);
+ 
}
+
+ 
pre {
+ 
  font-family: var(--font-family-code-alt);
+ 
  overflow-x: hidden;
+ 
  text-overflow: hidden;
+ 
  color: var(--color-fg-dim);
+ 
}
+
+ 
pre.diagram {
+ 
  line-height: 1;
+ 
}
+
+ 
strong.highlight {
+ 
  color: var(--color-pink);
+ 
}
+
+ 
h2 em {
+ 
  color: vaR(--color-fg-contrast);
+ 
  font-weight: normal;
+ 
}
+
+ 
a {
+ 
  color: var(--color-fg-low-contrast);
+ 
  text-decoration: none;
+ 
  border-bottom: 1px dashed var(--color-border-default);
+ 
}
+ 
a:hover {
+ 
  color: var(--color-fg-contrast);
+ 
  border-color: var(--color-fg-contrast);
+ 
}
+ 
.button {
+ 
  display: inline-block;
+ 
  color: var(--color-pink);
+ 
  background: none;
+ 
  border: 1px dashed var(--color-pink);
+ 
  margin: 0.5rem 0;
+ 
  padding: 0.5rem 0.75rem;
+ 
  cursor: pointer;
+ 
}
+ 
.button:hover, .button.filled,
+ 
:root[data-theme="light"] .button {
+ 
  border-color: var(--color-pink);
+ 
  background-color: var(--color-pink);
+ 
  color: var(--color-bg-default);
+ 
}
+
+ 
.button.secondary {
+ 
  color: var(--color-secondary);
+ 
  border: 1px dashed var(--color-secondary);
+ 
}
+
+ 
.button.secondary:hover, .button.secondary.filled,
+ 
:root[data-theme="light"] .button.secondary {
+ 
  border-color: var(--color-secondary);
+ 
  background-color: var(--color-secondary);
+ 
  color: var(--color-bg-default);
+ 
}
+
+ 
.button.small {
+ 
  padding: 0.25rem 0.75rem;
+ 
  margin: 0;
+ 
}
+
+ 
.button.filled, :root[data-theme="light"] .button {
+ 
  border-style: none;
+ 
}
+ 
.button.filled:hover, :root[data-theme="light"] .button:hover {
+ 
  background-color: var(--color-fg-low-contrast) !important;
+ 
  color: var(--color-bg-default) !important;
+ 
}
+
+ 
li::marker {
+ 
  content: "- ";
+ 
}
+
+ 
body > main {
+ 
  margin: 0 auto;
+ 
  padding: 2rem;
+ 
  max-width: 96ch;
+ 
}
+
+ 
body > header {
+ 
  position: relative;
+ 
  color: var(--color-fg-low-contrast);
+ 
  border-bottom: 1px solid var(--color-border-hint);
+ 
  font-weight: bold;
+ 
  white-space: nowrap;
+ 
  overflow: hidden;
+ 
  text-overflow: hidden;
+ 
  flex-wrap: nowrap;
+ 
  width: 100%;
+ 
  height: 1.5rem;
+ 
  min-height: 1.5rem;
+ 
  line-height: 1.5rem;
+ 
}
+
+ 
body > footer {
+ 
  display: flex;
+ 
  color: var(--color-fg-dim);
+ 
  border-top: 1px solid var(--color-border-hint);
+ 
  padding: 0 0.5rem;
+ 
  white-space: nowrap;
+ 
  width: 100%;
+ 
  height: 1.5rem;
+ 
  min-height: 1.5rem;
+ 
  line-height: 1.5rem;
+ 
}
+
+ 
body > footer > * {
+ 
  flex: 1;
+ 
  display: flex;
+ 
  justify-content: center;
+ 
  align-items: center;
+ 
}
+ 
body > footer :first-child > * {
+ 
  margin-right: auto;
+ 
}
+ 
body > footer :last-child > * {
+ 
  margin-left: auto;
+ 
}
+ 
body > footer .radworks {
+ 
  height: 1rem;
+ 
  line-height: 1.5rem;
+ 
}
+ 
body > footer a {
+ 
  border-bottom: none;
+ 
}
+ 
:root[data-theme="light"] .radworks {
+ 
  opacity: 0.33;
+ 
}
+
+ 
nav {
+ 
  display: flex;
+ 
  align-items: center;
+ 
  gap: 1rem;
+ 
}
+
+ 
nav .cta {
+ 
  display: flex;
+ 
  gap: 1rem;
+ 
  align-items: center;
+ 
}
+
+ 
#logo {
+ 
  position: absolute;
+ 
  z-index: 99;
+ 
}
+
+ 
#ribbon {
+ 
  position: absolute;
+ 
  float: right;
+ 
  top: 0;
+ 
  right: 0;
+ 
  z-index: 99;
+ 
}
+
+ 
#definition {
+ 
  color: var(--color-fg-dim);
+ 
}
+
+ 
.links {
+ 
  display: inline-flex;
+ 
  margin-left: 1rem;
+ 
  gap: 2rem;
+ 
}
+
+ 
a.screenshot {
+ 
  border: none;
+ 
}
+ 
a.screenshot:hover img {
+ 
  filter: grayscale(0%);
+ 
}
+ 
a.screenshot img {
+ 
  margin-bottom: 0;
+ 
}
+ 
.caption {
+ 
  color: var(--color-fg-dim);
+ 
}
+
+ 
img.screenshot {
+ 
  margin-top: 1rem;
+ 
  margin-bottom: 1rem;
+ 
  border: 1px dashed var(--color-secondary);
+ 
  width: 100%;
+ 
  filter: grayscale(100%);
+ 
}
+
+ 
/* COPY BOX */
+
+ 
#install {
+ 
  display: inline-flex;
+ 
  align-items: center;
+ 
  color: var(--color-fg-low-contrast);
+ 
  margin: 0.5rem 2rem;
+ 
  padding: 0.75rem 1rem;
+ 
  border: 1px dashed var(--color-border-hint);
+ 
  max-width: 90%;
+ 
  cursor: pointer;
+ 
}
+ 
#install:hover {
+ 
  border-color: var(--color-fg-contrast);
+ 
}
+ 
#install:active {
+ 
  border-color: var(--color-fg-highlight-secondary);
+ 
}
+ 
#install code {
+ 
  line-height: 16px;
+ 
  text-overflow: ellipsis;
+ 
  overflow-x: hidden;
+ 
  white-space: nowrap;
+ 
}
+ 
#install:hover img {
+ 
  filter: brightness(130%);
+ 
}
+ 
#install:hover code {
+ 
  color: var(--color-fg-contrast);
+ 
}
+ 
#install:active code {
+ 
  color: var(--color-fg-highlight-secondary);
+ 
}
+ 
#install-copy {
+ 
  display: flex;
+ 
  align-items: center;
+ 
  color: var(--color-fg-highlight-secondary);
+ 
  line-height: 16px;
+ 
  margin-left: 1rem;
+ 
}
+
+ 
/* TICKER */
+
+ 
.ticker {
+ 
  display: inline-block;
+ 
  font-size: 0.875rem;
+ 
  display: flex;
+ 
  width: 100%;
+ 
  animation: ticker 120s linear infinite;
+ 
}
+
+ 
.ticker > *:nth-child(even) {
+ 
  color: var(--color-fg-dim);
+ 
}
+ 
.ticker > *:nth-child(odd) {
+ 
  color: var(--color-fg-low-contrast);
+ 
}
+
+ 
@keyframes ticker {
+ 
  0% {
+ 
    transform: translate3d(100%, 0, 0);
+ 
  }
+ 
  100% {
+ 
    transform: translate3d(-200%, 0, 0);
+ 
  }
+ 
}
+
+ 
@media (max-width: 800px) {
+ 
  nav {
+ 
    display: block;
+ 
  }
+ 
  #ribbon {
+ 
    width: 128px;
+ 
    height: 128px;
+ 
  }
+ 
  .links {
+ 
    display: flex;
+ 
    margin-left: 0;
+ 
    margin-top: 1rem;
+ 
    gap: 1.5rem;
+ 
  }
+ 
}
deleted index.css
@@ -1,370 +0,0 @@
- 
@charset "utf-8";
- 
@import "/assets/css/common.css";
- 
@import "/assets/css/fonts.css";
-
- 
body {
- 
  line-height: 1.4;
- 
  max-width: 100%;
- 
  height: 100%;
- 
}
-
- 
body, h1, h2, h3, h4, h5, p, table {
- 
  font-size: 1rem;
- 
  font-family: var(--font-family-code-alt);
- 
}
-
- 
h1, h2 {
- 
  font-weight: bold;
- 
  color: var(--color-fg-highlight-tertiary);
- 
}
-
- 
h1 {
- 
  padding: 0.125rem;
- 
  margin-top: 2rem;
- 
  text-transform: uppercase;
- 
}
-
- 
h2 {
- 
  margin-left: 1rem;
- 
}
-
- 
h2::after {
- 
  margin-left: 0.5rem;
- 
  display: inline-block;
- 
  width: 16px;
- 
  height: 16px;
- 
  background-size: 16px 16px;
- 
  vertical-align: text-bottom;
- 
}
-
- 
h2#unparalleled-autonomy:after {
- 
  background-image: url(/assets/images/radicle.svg);
- 
  filter: brightness(200%) hue-rotate(160deg);
- 
  content: "";
- 
}
-
- 
h2#modular-by-design:after {
- 
  background-image: url(/assets/images/puzzle.svg);
- 
  content: "";
- 
}
-
- 
h2#local-first::after {
- 
  background-image: url(/assets/images/cabin.svg);
- 
  filter: brightness(130%);
- 
  content: "";
- 
}
-
- 
h2#your-data-forever-and-secure::after {
- 
  background-image: url(/assets/images/key.svg);
- 
  content: "";
- 
}
-
- 
h2#evolvable--extensible::after {
- 
  background-image: url(/assets/images/p2p.svg);
- 
  content: "";
- 
}
-
- 
p, ul, nav, pre, #install {
- 
  margin-left: 2rem;
- 
}
-
- 
hr {
- 
  border: none;
- 
  border-bottom: 1px solid var(--color-border-hint);
- 
  margin: 2rem 0;
- 
}
-
- 
ul {
- 
  list-style-position: inside;
- 
  padding-left: 0;
- 
}
-
- 
ul li {
- 
  margin-left: 0;
- 
}
- 
ul li::marker {
- 
  content: "* ";
- 
}
-
- 
blockquote {
- 
  padding: 0 1rem;
- 
  margin-left: 2rem;
- 
  border-left: 1px solid var(--color-border-hint);
- 
}
- 
blockquote p {
- 
  margin: 0;
- 
}
-
- 
code {
- 
  font-family: var(--font-family-code-alt);
- 
  color: var(--color-fg-low-contrast);
- 
}
-
- 
pre {
- 
  font-family: var(--font-family-code-alt);
- 
  overflow-x: hidden;
- 
  text-overflow: hidden;
- 
  color: var(--color-fg-dim);
- 
}
-
- 
pre.diagram {
- 
  line-height: 1;
- 
}
-
- 
strong.highlight {
- 
  color: var(--color-pink);
- 
}
-
- 
h2 em {
- 
  color: vaR(--color-fg-contrast);
- 
  font-weight: normal;
- 
}
-
- 
a {
- 
  color: var(--color-fg-low-contrast);
- 
  text-decoration: none;
- 
  border-bottom: 1px dashed var(--color-border-default);
- 
}
- 
a:hover {
- 
  color: var(--color-fg-contrast);
- 
  border-color: var(--color-fg-contrast);
- 
}
- 
.button {
- 
  display: inline-block;
- 
  color: var(--color-pink);
- 
  background: none;
- 
  border: 1px dashed var(--color-pink);
- 
  margin: 0.5rem 0;
- 
  padding: 0.5rem 0.75rem;
- 
  cursor: pointer;
- 
}
- 
.button:hover, .button.filled,
- 
:root[data-theme="light"] .button {
- 
  border-color: var(--color-pink);
- 
  background-color: var(--color-pink);
- 
  color: var(--color-bg-default);
- 
}
-
- 
.button.secondary {
- 
  color: var(--color-secondary);
- 
  border: 1px dashed var(--color-secondary);
- 
}
-
- 
.button.secondary:hover, .button.secondary.filled,
- 
:root[data-theme="light"] .button.secondary {
- 
  border-color: var(--color-secondary);
- 
  background-color: var(--color-secondary);
- 
  color: var(--color-bg-default);
- 
}
-
- 
.button.small {
- 
  padding: 0.25rem 0.75rem;
- 
  margin: 0;
- 
}
-
- 
.button.filled, :root[data-theme="light"] .button {
- 
  border-style: none;
- 
}
- 
.button.filled:hover, :root[data-theme="light"] .button:hover {
- 
  background-color: var(--color-fg-low-contrast) !important;
- 
  color: var(--color-bg-default) !important;
- 
}
-
- 
li::marker {
- 
  content: "- ";
- 
}
-
- 
body > main {
- 
  margin: 0 auto;
- 
  padding: 2rem;
- 
  max-width: 96ch;
- 
}
-
- 
body > header {
- 
  position: relative;
- 
  color: var(--color-fg-low-contrast);
- 
  border-bottom: 1px solid var(--color-border-hint);
- 
  font-weight: bold;
- 
  white-space: nowrap;
- 
  overflow: hidden;
- 
  text-overflow: hidden;
- 
  flex-wrap: nowrap;
- 
  width: 100%;
- 
  height: 1.5rem;
- 
  min-height: 1.5rem;
- 
  line-height: 1.5rem;
- 
}
-
- 
body > footer {
- 
  display: flex;
- 
  color: var(--color-fg-dim);
- 
  border-top: 1px solid var(--color-border-hint);
- 
  padding: 0 0.5rem;
- 
  white-space: nowrap;
- 
  width: 100%;
- 
  height: 1.5rem;
- 
  min-height: 1.5rem;
- 
  line-height: 1.5rem;
- 
}
-
- 
body > footer > * {
- 
  flex: 1;
- 
  display: flex;
- 
  justify-content: center;
- 
  align-items: center;
- 
}
- 
body > footer :first-child > * {
- 
  margin-right: auto;
- 
}
- 
body > footer :last-child > * {
- 
  margin-left: auto;
- 
}
- 
body > footer .radworks {
- 
  height: 1rem;
- 
  line-height: 1.5rem;
- 
}
- 
body > footer a {
- 
  border-bottom: none;
- 
}
- 
:root[data-theme="light"] .radworks {
- 
  opacity: 0.33;
- 
}
-
- 
nav {
- 
  display: flex;
- 
  align-items: center;
- 
  gap: 1rem;
- 
}
-
- 
nav .cta {
- 
  display: flex;
- 
  gap: 1rem;
- 
  align-items: center;
- 
}
-
- 
#logo {
- 
  position: absolute;
- 
  z-index: 99;
- 
}
-
- 
#ribbon {
- 
  position: absolute;
- 
  float: right;
- 
  top: 0;
- 
  right: 0;
- 
  z-index: 99;
- 
}
-
- 
#definition {
- 
  color: var(--color-fg-dim);
- 
}
-
- 
.links {
- 
  display: inline-flex;
- 
  margin-left: 1rem;
- 
  gap: 2rem;
- 
}
-
- 
a.screenshot {
- 
  border: none;
- 
}
- 
a.screenshot:hover img {
- 
  filter: grayscale(0%);
- 
}
- 
a.screenshot img {
- 
  margin-bottom: 0;
- 
}
- 
.caption {
- 
  color: var(--color-fg-dim);
- 
}
-
- 
img.screenshot {
- 
  margin-top: 1rem;
- 
  margin-bottom: 1rem;
- 
  border: 1px dashed var(--color-secondary);
- 
  width: 100%;
- 
  filter: grayscale(100%);
- 
}
-
- 
/* COPY BOX */
-
- 
#install {
- 
  display: inline-flex;
- 
  align-items: center;
- 
  color: var(--color-fg-low-contrast);
- 
  margin: 0.5rem 2rem;
- 
  padding: 0.75rem 1rem;
- 
  border: 1px dashed var(--color-border-hint);
- 
  max-width: 90%;
- 
  cursor: pointer;
- 
}
- 
#install:hover {
- 
  border-color: var(--color-fg-contrast);
- 
}
- 
#install:active {
- 
  border-color: var(--color-fg-highlight-secondary);
- 
}
- 
#install code {
- 
  line-height: 16px;
- 
  text-overflow: ellipsis;
- 
  overflow-x: hidden;
- 
  white-space: nowrap;
- 
}
- 
#install:hover img {
- 
  filter: brightness(130%);
- 
}
- 
#install:hover code {
- 
  color: var(--color-fg-contrast);
- 
}
- 
#install:active code {
- 
  color: var(--color-fg-highlight-secondary);
- 
}
- 
#install-copy {
- 
  display: flex;
- 
  align-items: center;
- 
  color: var(--color-fg-highlight-secondary);
- 
  line-height: 16px;
- 
  margin-left: 1rem;
- 
}
-
- 
/* TICKER */
-
- 
.ticker {
- 
  display: inline-block;
- 
  font-size: 0.875rem;
- 
  display: flex;
- 
  width: 100%;
- 
  animation: ticker 120s linear infinite;
- 
}
-
- 
.ticker > *:nth-child(even) {
- 
  color: var(--color-fg-dim);
- 
}
- 
.ticker > *:nth-child(odd) {
- 
  color: var(--color-fg-low-contrast);
- 
}
-
- 
@keyframes ticker {
- 
  0% {
- 
    transform: translate3d(100%, 0, 0);
- 
  }
- 
  100% {
- 
    transform: translate3d(-200%, 0, 0);
- 
  }
- 
}
-
- 
@media (max-width: 800px) {
- 
  nav {
- 
    display: block;
- 
  }
- 
  #ribbon {
- 
    width: 128px;
- 
    height: 128px;
- 
  }
- 
  .links {
- 
    display: flex;
- 
    margin-left: 0;
- 
    margin-top: 1rem;
- 
    gap: 1.5rem;
- 
  }
- 
}
modified index.md
@@ -1,6 +1,6 @@
---
- 
title: "Radicle: sovereign code infrastructure"
- 
layout: home
+ 
title: "Radicle: the sovereign forge"
+ 
layout: index

---



# Synopsis