@@ -8,19 +8,18 @@ weight = 1
88
99Port is a desktop GUI application that allows you to spin up, access, and manage your Urbit ships without any knowledge of the command line or Urbit binary.
1010
11−<div id="port-os" class="os">
12− <input type="radio" id="port-macos" name="port-os" checked>
13− <label for="port-macos">MacOS</label>
14− <div class="tab">
15− <p>To install <strong>Port</strong> on MacOS simply download and open the <code>.dmg</code> file.</p>
16− <a href="https://github.com/urbit/port/releases/latest/download/Port.dmg" class="button-lg bg-green-400 text-white" style="width: 12rem;">
17− Download Port
18− </a>
19− </div>
20−
21− <input type="radio" id="port-linux" name="port-os">
22− <label for="port-linux">Linux</label>
23− <div class="tab">
11+{% tabs %}
12+
13+{% tab label="MacOS" %}
14+
15+To install **Port** on MacOS, simply download and open the `.dmg` file.
16+
17+{% button label="Download Port" link="https://github.com/urbit/port/releases/latest/download/Port.dmg" color="bg-green-400 text-white" %}
18+{% /button %}
19+
20+{% /tab %}
21+
22+{% tab label="Linux" %}
2423
2524We use `snap` so that **Port** can stay updated automatically. If you already have `snap` installed, simply run:
2625
@@ -30,57 +29,18 @@ sudo snap install port
3029
3130Or to install `snap` for your distribution, snapcraft provides [installation instructions](https://snapcraft.io/docs/installing-snapd).
3231
33− </div>
34−
35− <input type="radio" id="port-windows" name="port-os">
36− <label for="port-windows">Windows</label>
37− <div class="tab">
38− <p>To install <strong>Port</strong> on Windows simply download and open the <code>.exe</code> file.</p>
39− <a href="https://github.com/urbit/port/releases/latest/download/PortSetup.exe" class="button-lg bg-green-400 text-white" style="width: 12rem;">
40− Download Port
41− </a>
42− <p><small>
43− Note: The Windows version is newly released and is not yet code signed so you will have to click through a prompt warning you about running it. If you simply click <code>more info</code> -> <code>run anyway</code> it will run.
44− </small></p>
45− </div>
46−</div>
47−
48−<style>
49− .os {
50− display: flex;
51− flex-wrap: wrap;
52− }
53− .os label {
54− order: -1;
55− padding: .5rem;
56− min-width: 70px;
57− text-align: center;
58− cursor: pointer;
59− }
60− .os input[type="radio"] {
61− display: none;
62− }
63− .os .tab {
64− display: none;
65− margin-top: 1rem;
66− width: 100%;
67− max-width: 100%;
68− }
69− .os .tab p:first-child {
70− margin-top: 0;
71− }
72− .os .tab p:last-child {
73− margin-bottom: 0;
74− }
75− .os input[type='radio']:checked + label {
76− font-weight: bold;
77− background-color: rgba(244,243,241,1);
78− border-radius: 0.5em;
79− }
80− .os input[type='radio']:checked + label + .tab {
81− display: block;
82−}
83−</style>
32+{% /tab %}
33+
34+{% tab label="Windows" %}
35+
36+To install **Port** on Windows, simply download and open the `.exe` file.
37+
38+{% button label="Download Port" link="https://github.com/urbit/port/releases/latest/download/PortSetup.exe" color="bg-green-400 text-white" %}
39+{% /button %}
40+
41+{% /tab %}
42+
43+{% /tabs %}
8444
8545### 2. Boot a comet
8646
@@ -96,7 +56,7 @@ Once that's finished, click **Launch Ship into Urbit** and you'll be on the netw
9656
9757
9858
99−<div className="bg-wall-100 p-7 rounded-xl markdown-callout">
59+{% callout %}
10060
10161**Want to combine the simplicity of Port with a permanent Urbit ID?**
10262
@@ -107,7 +67,7 @@ Port will boot your Urbit in a few minutes!
10767
10868For more information on getting a planet, see our [Getting an Urbit ID](/guides/getting-an-urbit-id) guide.
10969
110−</div>
70+{% /callout %}
11171
11272### Next steps
11373