Radish alpha
r
radicle.xyz
rad:z371PVmDHdjJucejRoRYJcDEvD5pp
Radicle website including documentation and guides
Radicle
Git
Commits › 5da62cc
Improve copy button
Alexis Sellier committed 2 years ago
commit 5da62cccdf76af5ef0738915b4398b9d719bd720
parent 0d23274
4 files changed +110 -100
added _includes/install.html
@@ -0,0 +1,108 @@
+ 
<style>
+ 
  #install {
+ 
    display: inline-flex;
+ 
    align-items: center;
+ 
    margin: 0.5rem 2rem;
+ 
    padding: 0.75rem 1rem;
+ 
    border: 1px dashed var(--color-secondary);
+ 
    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;
+ 
    color: var(--color-secondary);
+ 
    overflow-x: hidden;
+ 
    white-space: nowrap;
+ 
  }
+ 
  #install:hover object svg {
+ 
    width: 16px;
+ 
    height: 16px;
+ 
    filter: brightness(130%);
+ 
  }
+ 
  #install:hover code {
+ 
    color: var(--color-fg-contrast);
+ 
  }
+ 
  #install:hover svg {
+ 
    color: var(--color-fg-contrast);
+ 
  }
+ 
  #install svg {
+ 
    color: var(--color-secondary);
+ 
  }
+ 
  #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;
+ 
  }
+ 
</style>
+
+ 
<div id="install">
+ 
  <code id="install-command">curl -sSf https://radicle.xyz/install | sh</code>
+ 
  <span id="install-copy">
+ 
    <svg width="16" height="16" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+ 
      <rect x="60" y="24" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="72" y="24" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="84" y="24" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="96" y="24" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="108" y="24" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="120" y="24" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="132" y="24" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="144" y="24" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="60" y="36" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="144" y="36" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="144" y="48" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="24" y="60" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="36" y="60" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="48" y="60" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="60" y="60" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="72" y="60" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="84" y="60" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="96" y="60" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="108" y="60" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="144" y="60" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="24" y="72" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="108" y="72" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="144" y="72" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="24" y="84" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="108" y="84" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="144" y="84" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="24" y="96" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="108" y="96" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="144" y="96" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="24" y="108" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="108" y="108" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="144" y="108" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="24" y="120" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="108" y="120" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="144" y="120" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="24" y="132" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="108" y="132" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="132" y="132" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="144" y="132" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="24" y="144" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="108" y="144" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="24" y="156" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="108" y="156" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="24" y="168" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="36" y="168" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="48" y="168" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="60" y="168" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="72" y="168" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="84" y="168" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="96" y="168" width="12" height="12" fill="currentColor"/>
+ 
      <rect x="108" y="168" width="12" height="12" fill="currentColor"/>
+ 
    </svg>
+ 
  </span>
+ 
</div>
+
modified assets/css/page.css
@@ -244,6 +244,7 @@ nav .cta {


#logo {

  position: absolute;
+ 
  left: 0.5rem;

  z-index: 99;

}
@@ -286,47 +287,6 @@ img.screenshot {
  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 {
deleted assets/images/copy.svg
@@ -1,53 +0,0 @@
- 
<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
- 
<rect x="60" y="24" width="12" height="12" fill="#888899"/>
- 
<rect x="72" y="24" width="12" height="12" fill="#888899"/>
- 
<rect x="84" y="24" width="12" height="12" fill="#888899"/>
- 
<rect x="96" y="24" width="12" height="12" fill="#888899"/>
- 
<rect x="108" y="24" width="12" height="12" fill="#888899"/>
- 
<rect x="120" y="24" width="12" height="12" fill="#888899"/>
- 
<rect x="132" y="24" width="12" height="12" fill="#888899"/>
- 
<rect x="144" y="24" width="12" height="12" fill="#888899"/>
- 
<rect x="60" y="36" width="12" height="12" fill="#888899"/>
- 
<rect x="144" y="36" width="12" height="12" fill="#888899"/>
- 
<rect x="144" y="48" width="12" height="12" fill="#888899"/>
- 
<rect x="24" y="60" width="12" height="12" fill="#888899"/>
- 
<rect x="36" y="60" width="12" height="12" fill="#888899"/>
- 
<rect x="48" y="60" width="12" height="12" fill="#888899"/>
- 
<rect x="60" y="60" width="12" height="12" fill="#888899"/>
- 
<rect x="72" y="60" width="12" height="12" fill="#888899"/>
- 
<rect x="84" y="60" width="12" height="12" fill="#888899"/>
- 
<rect x="96" y="60" width="12" height="12" fill="#888899"/>
- 
<rect x="108" y="60" width="12" height="12" fill="#888899"/>
- 
<rect x="144" y="60" width="12" height="12" fill="#888899"/>
- 
<rect x="24" y="72" width="12" height="12" fill="#888899"/>
- 
<rect x="108" y="72" width="12" height="12" fill="#888899"/>
- 
<rect x="144" y="72" width="12" height="12" fill="#888899"/>
- 
<rect x="24" y="84" width="12" height="12" fill="#888899"/>
- 
<rect x="108" y="84" width="12" height="12" fill="#888899"/>
- 
<rect x="144" y="84" width="12" height="12" fill="#888899"/>
- 
<rect x="24" y="96" width="12" height="12" fill="#888899"/>
- 
<rect x="108" y="96" width="12" height="12" fill="#888899"/>
- 
<rect x="144" y="96" width="12" height="12" fill="#888899"/>
- 
<rect x="24" y="108" width="12" height="12" fill="#888899"/>
- 
<rect x="108" y="108" width="12" height="12" fill="#888899"/>
- 
<rect x="144" y="108" width="12" height="12" fill="#888899"/>
- 
<rect x="24" y="120" width="12" height="12" fill="#888899"/>
- 
<rect x="108" y="120" width="12" height="12" fill="#888899"/>
- 
<rect x="144" y="120" width="12" height="12" fill="#888899"/>
- 
<rect x="24" y="132" width="12" height="12" fill="#888899"/>
- 
<rect x="108" y="132" width="12" height="12" fill="#888899"/>
- 
<rect x="132" y="132" width="12" height="12" fill="#888899"/>
- 
<rect x="144" y="132" width="12" height="12" fill="#888899"/>
- 
<rect x="24" y="144" width="12" height="12" fill="#888899"/>
- 
<rect x="108" y="144" width="12" height="12" fill="#888899"/>
- 
<rect x="24" y="156" width="12" height="12" fill="#888899"/>
- 
<rect x="108" y="156" width="12" height="12" fill="#888899"/>
- 
<rect x="24" y="168" width="12" height="12" fill="#888899"/>
- 
<rect x="36" y="168" width="12" height="12" fill="#888899"/>
- 
<rect x="48" y="168" width="12" height="12" fill="#888899"/>
- 
<rect x="60" y="168" width="12" height="12" fill="#888899"/>
- 
<rect x="72" y="168" width="12" height="12" fill="#888899"/>
- 
<rect x="84" y="168" width="12" height="12" fill="#888899"/>
- 
<rect x="96" y="168" width="12" height="12" fill="#888899"/>
- 
<rect x="108" y="168" width="12" height="12" fill="#888899"/>
- 
</svg>
modified index.md
@@ -28,12 +28,7 @@ Linux, macOS and BSD variants.
The following command downloads and runs the installation script on your

system:
- 
<div id="install">
- 
  <code id="install-command">curl -sSf https://radicle.xyz/install | sh</code>
- 
  <span id="install-copy">
- 
    <img width="16" height="16" src="/assets/images/copy.svg"/>
- 
  </span>
- 
</div>
+ 
{% include install.html %}



Alternatively, you can build from [source][heartwood] or get the [binaries][].