git.iko.soy/astrolabe
on main help sign in
docs!
5334cbfJohn Hyde
base-desk/lib/cram.hoon+1
compare with main
unifiedsplit
@@ -31,6 +31,7 @@
31 =- (weld - $(p.gen t.p.gen))
31 =- (weld - $(p.gen t.p.gen))
32 ?^ -.i.p.gen $(gen [%xray i.p.gen])
32 ?^ -.i.p.gen $(gen [%xray i.p.gen])
33 ~| [%shut-tuna -.i.p.gen]
33 ~| [%shut-tuna -.i.p.gen]
34+ ~| [%shut-slamon -.p.i.p.gen]
34 ?+ -.i.p.gen !!
35 ?+ -.i.p.gen !!
35 %manx ?>(?=(%xray -.p.i.p.gen) $(gen p.i.p.gen))
36 %manx ?>(?=(%xray -.p.i.p.gen) $(gen p.i.p.gen))
36 %marl ?>(?=(%mcts -.p.i.p.gen) $(gen p.i.p.gen))
37 %marl ?>(?=(%mcts -.p.i.p.gen) $(gen p.i.p.gen))
desk/app/astrolabe.hoon+2−1
@@ -57,8 +57,9 @@
57 ^- (unit @t)
57 ^- (unit @t)
58 ?. .^(? %cu (scrio q.byk.bowl doc-path))
58 ?. .^(? %cu (scrio q.byk.bowl doc-path))
59 ~
59 ~
60− =/ mme=(each manx *) (mule |.((udon-to-docu .^(@t %cx (scrio q.byk.bowl doc-path)))))
60+ =/ mme=(each manx tang) (mule |.((udon-to-docu .^(@t %cx (scrio q.byk.bowl doc-path)))))
61 ?: ?=(%.n -.mme)
61 ?: ?=(%.n -.mme)
62+ %- (slog p.mme)
62 ~
63 ~
63 `(crip (en-xml:html p.mme))
64 `(crip (en-xml:html p.mme))
64--
65--
desk/desk.docket-0+3−2
@@ -1,6 +1,7 @@
1:~ title+'Astrolabe'
1:~ title+'Astrolabe'
2− info+'An Urbit app that does great things'
2+ info+'Your guide to the Urbit constellations'
3− color+0x2e.4347
3+ color+0x1f.243c
4+ image+'https://raw.githubusercontent.com/johnhyde/astrolabe/main/ui/src/assets/astrolabe.svg'
4 glob-http+['https://bootstrap.urbit.org/glob-0v5.hurm4.ejod5.ngg9h.iub9i.n1j7o.glob' 0v5.hurm4.ejod5.ngg9h.iub9i.n1j7o]
5 glob-http+['https://bootstrap.urbit.org/glob-0v5.hurm4.ejod5.ngg9h.iub9i.n1j7o.glob' 0v5.hurm4.ejod5.ngg9h.iub9i.n1j7o]
5 base+'astrolabe'
6 base+'astrolabe'
6 version+[0 0 1]
7 version+[0 0 1]
desk/doc/usr/azimuth.udonnew file+4
@@ -0,0 +1,4 @@
1+;>
2+# Azimuth
3+
4+It's just NFTs!
desk/doc/usr/l2.udonnew file+4
@@ -0,0 +1,4 @@
1+;>
2+# Layer 2
3+
4+It's magic!
desk/doc/usr/patpee.udonnew file+4
@@ -0,0 +1,4 @@
1+;>
2+# What is a `@p`?
3+
4+It's just a number written as some syllables!
desk/doc/usr/urbit-id.udon+69−5
@@ -1,7 +1,71 @@
1+:- ~[comments+&]
1;>
2;>
2−## What is an Urbit ID
3+# What is an Urbit ID?
3
4
4−It's pretty cool actually:
5+An Urbit ID is like an account on the Urbit network. You can’t use Urbit without an Urbit ID.
5−- secure
6+
6−- unique
7+Every active Urbit ID has a number of properties:
7−- fun to say (_sometimes_)
8+
9+- `@p` (pronounced pat-pee) - A permanent, unique identifier, e.g. ~zod or ~midlev-mindyr.
10+ This often functions like a username or email address.
11+ Every `@p` is equivalent to a number ≥ 0 and > 256¹⁶, with longer `@p`s giving larger numbers.
12+ The length of a `@p` indicates what class of ID it is.
13+ [Read More](/~/scry/docs/usr/astrolabe/patpee.html)
14+
15+- Public and Private Keys - These allow you to cryptographically prove your ownership of an ID.
16+ This is a bit like having a password for an account, or signing a document.
17+ All messages on Urbit are automatically signed and verified, so you know they’re authentic.
18+ [Read More](/~/scry/docs/usr/astrolabe/keys.html)
19+
20+- Ship - A ship is an Urbit computer, which is always tied to the Urbit ID it was booted with.
21+ When you boot Urbit for the first time, you provide your keys and we call this booting a “ship”.
22+ When you use this computer on the network, you are “piloting” your “ship”.
23+ Your ship stores all your data and apps.
24+
25+## Classes of Urbit ID
26+
27+There are 5 classes of Urbit ID:
28+[Galaxy](/~/scry/docs/usr/astrolabe/galaxy.html),
29+[Star](/~/scry/docs/usr/astrolabe/star.html),
30+[Planet](/~/scry/docs/usr/astrolabe/planet.html),
31+[Moon](/~/scry/docs/usr/astrolabe/moon.html), and
32+[Comet](/~/scry/docs/usr/astrolabe/comet.html).
33+
34+Galaxies, stars, and planets are [Azimuth points](/~/scry/docs/usr/astrolabe/azimuth.html),
35+and work very similarly.
36+Moons and comets are a bit different.
37+
38+
39+### Azimuth Points
40+
41+An [Azimuth point](/~/scry/docs/usr/astrolabe/azimuth.html) is just an Urbit ID which is secured on the Ethereum blockchain.
42+Galaxies, stars, and planets are NFTs, governed by the Azimuth smart contract.
43+Owning an Azimuth point lets you reset your keys, spawn new IDs, and transfer ownership
44+to someone else, among other things.
45+
46+When Ethereum got popular and transactions became very expensive, a
47+[Layer 2 solution]((/~/scry/docs/usr/astrolabe/l2.html))
48+was developed (commonly called "L2"), which allows Azimuth points to be spawned, transferred,
49+etc. basically for free.
50+
51+### Moons
52+
53+Moons are created, owned, and controlled by a parent ID, either a galaxy, star, or planet.
54+Moons are free and easy to create, and each Azimuth point can create about 4 billion.
55+Moons can use the Urbit network just like any other ID, but they are inextricably linked to their parents.
56+[Read More](/~/scry/docs/usr/astrolabe/moon.html)
57+
58+### Comets
59+
60+Comets are essentially unlimited, and can be created for free by anyone.
61+They're good for new people exploring the network, operating somewhat anonymously,
62+and testing things out. However, the keys for a comet can't be changed, so they are
63+not a viable long-term ID. Also, since anyone can boot a comet, comets might be viewed
64+with distrust in some contexts.
65+
66+# Further Reading:
67+
68+- [A more technical overview](https://urbit.org/using/id/overview)
69+- From the Operator’s Guide:
70+ [Which ID should I buy?](https://operators.urbit.org/guides/which-id-should-i-buy)
71+- [Azimuth FAQ](https://azimuth.network/#faq)
ui/index.html+6−2
@@ -2,12 +2,16 @@
2<html lang="en">
2<html lang="en">
3 <head>
3 <head>
4 <meta charset="UTF-8" />
4 <meta charset="UTF-8" />
5− <link rel="icon" href="/favicon.ico" />
5+ <!-- <link rel="icon" href="/favicon.ico" /> -->
6+ <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
7+ <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
8+ <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
9+ <link rel="manifest" href="/site.webmanifest">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Astrolabe</title>
11 <title>Astrolabe</title>
8 </head>
12 </head>
9 <body>
13 <body>
10− <div id="app"></div>
14+ <div id="app" class="h-full"></div>
11 <script type="module" src="/src/main.ts"></script>
15 <script type="module" src="/src/main.ts"></script>
12 </body>
16 </body>
13</html>
17</html>
ui/public/android-chrome-192x192.pngnew file

Binary file not shown.

ui/public/android-chrome-512x512.pngnew file

Binary file not shown.

ui/public/apple-touch-icon.pngnew file

Binary file not shown.

ui/public/favicon-16x16.pngnew file

Binary file not shown.

ui/public/favicon-32x32.pngnew file

Binary file not shown.

ui/public/favicon.ico

Binary file not shown.

ui/public/site.webmanifestnew file+1
@@ -0,0 +1 @@
1+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
ui/src/App.svelte+1−1
@@ -15,7 +15,7 @@
15 }
15 }
16</script>
16</script>
17
17
18−<main>
18+<main class="h-full overflow-y-auto">
19 <HelpModal />
19 <HelpModal />
20 <Router {routes} />
20 <Router {routes} />
21</main>
21</main>
ui/src/assets/astrolabe-tile.svgnew file+206
@@ -0,0 +1,206 @@
1+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2+<!-- Created with Inkscape (http://www.inkscape.org/) -->
3+
4+<svg
5+ width="360mm"
6+ height="360mm"
7+ viewBox="-60 -60 360 360"
8+ version="1.1"
9+ id="svg5"
10+ inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
11+ sodipodi:docname="astrolabe.svg"
12+ inkscape:export-filename="/Users/john/ws/urbit-apps/astrolabe/extras/astrolabe.png"
13+ inkscape:export-xdpi="96"
14+ inkscape:export-ydpi="96"
15+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
16+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
17+ xmlns:xlink="http://www.w3.org/1999/xlink"
18+ xmlns="http://www.w3.org/2000/svg"
19+ xmlns:svg="http://www.w3.org/2000/svg">
20+ <sodipodi:namedview
21+ id="namedview7"
22+ pagecolor="#ffffff"
23+ bordercolor="#999999"
24+ borderopacity="1"
25+ inkscape:pageshadow="0"
26+ inkscape:pageopacity="0"
27+ inkscape:pagecheckerboard="0"
28+ inkscape:document-units="mm"
29+ showgrid="false"
30+ inkscape:zoom="0.4798268"
31+ inkscape:cx="377.21945"
32+ inkscape:cy="262.59475"
33+ inkscape:window-width="1549"
34+ inkscape:window-height="1080"
35+ inkscape:window-x="490"
36+ inkscape:window-y="130"
37+ inkscape:window-maximized="0"
38+ inkscape:current-layer="layer1" />
39+ <defs
40+ id="defs2">
41+ <linearGradient
42+ id="navy"
43+ inkscape:swatch="solid">
44+ <stop
45+ style="stop-color:#1f243c;stop-opacity:1;"
46+ offset="0"
47+ id="stop4358" />
48+ </linearGradient>
49+ <linearGradient
50+ id="linearGradient3070"
51+ inkscape:swatch="solid">
52+ <stop
53+ style="stop-color:#ffff00;stop-opacity:1;"
54+ offset="0"
55+ id="stop3068" />
56+ </linearGradient>
57+ <linearGradient
58+ id="linearGradient3064"
59+ inkscape:swatch="solid">
60+ <stop
61+ style="stop-color:#ff3500;stop-opacity:1;"
62+ offset="0"
63+ id="stop3062" />
64+ </linearGradient>
65+ <linearGradient
66+ id="linearGradient3040"
67+ inkscape:swatch="solid">
68+ <stop
69+ style="stop-color:#fcd34d;stop-opacity:1;"
70+ offset="0"
71+ id="stop3038" />
72+ </linearGradient>
73+ <linearGradient
74+ id="linearGradient3034"
75+ inkscape:swatch="solid">
76+ <stop
77+ style="stop-color:#f2c11c;stop-opacity:1;"
78+ offset="0"
79+ id="stop3032" />
80+ </linearGradient>
81+ <linearGradient
82+ id="linearGradient3028"
83+ inkscape:swatch="solid">
84+ <stop
85+ style="stop-color:#f2e41c;stop-opacity:1;"
86+ offset="0"
87+ id="stop3026" />
88+ </linearGradient>
89+ <linearGradient
90+ id="gold"
91+ inkscape:swatch="solid">
92+ <stop
93+ style="stop-color:#fcd34d;stop-opacity:1;"
94+ offset="0"
95+ id="stop3020" />
96+ </linearGradient>
97+ <linearGradient
98+ inkscape:collect="always"
99+ xlink:href="#gold"
100+ id="linearGradient3024"
101+ x1="95"
102+ y1="47.5"
103+ x2="105"
104+ y2="47.5"
105+ gradientUnits="userSpaceOnUse"
106+ gradientTransform="translate(20,-30)" />
107+ <linearGradient
108+ inkscape:collect="always"
109+ xlink:href="#gold"
110+ id="linearGradient3030"
111+ x1="0"
112+ y1="150"
113+ x2="200"
114+ y2="150"
115+ gradientUnits="userSpaceOnUse"
116+ gradientTransform="translate(20,-30)" />
117+ <linearGradient
118+ inkscape:collect="always"
119+ xlink:href="#gold"
120+ id="linearGradient3036"
121+ x1="60.000027"
122+ y1="170"
123+ x2="179.99998"
124+ y2="170"
125+ gradientUnits="userSpaceOnUse"
126+ gradientTransform="matrix(1.0909095,0,0,1.0909095,4.090855,-50.454621)" />
127+ <linearGradient
128+ inkscape:collect="always"
129+ xlink:href="#gold"
130+ id="linearGradient3066"
131+ x1="27.225779"
132+ y1="154.82091"
133+ x2="161.28355"
134+ y2="154.82091"
135+ gradientUnits="userSpaceOnUse"
136+ gradientTransform="rotate(19,199.63646,194.75765)" />
137+ <linearGradient
138+ inkscape:collect="always"
139+ xlink:href="#gold"
140+ id="linearGradient3072"
141+ x1="90"
142+ y1="150"
143+ x2="110"
144+ y2="150"
145+ gradientUnits="userSpaceOnUse"
146+ gradientTransform="translate(20,-30)" />
147+ <linearGradient
148+ inkscape:collect="always"
149+ xlink:href="#navy"
150+ id="linearGradient4362"
151+ x1="0"
152+ y1="120"
153+ x2="240"
154+ y2="120"
155+ gradientUnits="userSpaceOnUse"
156+ gradientTransform="matrix(1.5,0,0,1.5,-59.999998,-59.999998)" />
157+ </defs>
158+ <g
159+ inkscape:label="Layer 1"
160+ inkscape:groupmode="layer"
161+ id="layer1">
162+ <rect
163+ style="display:inline;fill:url(#linearGradient4362);fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
164+ id="rect4185"
165+ width="360"
166+ height="360"
167+ x="-60"
168+ y="-60"
169+ inkscape:label="bg" />
170+ <circle
171+ style="display:inline;fill:none;fill-rule:evenodd;stroke:url(#linearGradient3030);stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
172+ id="path31"
173+ cx="120"
174+ cy="120"
175+ r="95"
176+ inkscape:label="mater plate" />
177+ <circle
178+ style="display:inline;fill:none;fill-rule:evenodd;stroke:url(#linearGradient3036);stroke-width:9.99995;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
179+ id="circle996"
180+ cx="135"
181+ cy="134.99998"
182+ r="60.000023"
183+ inkscape:label="rete" />
184+ <circle
185+ style="fill:url(#linearGradient3072);fill-opacity:1;stroke:none;stroke-width:9.99999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
186+ id="path1284"
187+ cx="120"
188+ cy="120"
189+ r="10"
190+ inkscape:label="center" />
191+ <path
192+ style="display:inline;fill:url(#linearGradient3066);fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
193+ d="m 35.977829,152.25317 140.036991,-53.75521 -5.75214,12.9195 -46.679,17.91834 -7.16733,-18.67158 -74.686466,28.66941 z"
194+ id="path1819"
195+ sodipodi:nodetypes="ccccccc"
196+ inkscape:transform-center-y="5.3755585"
197+ inkscape:transform-center-x="14.003679"
198+ inkscape:label="alidade" />
199+ <path
200+ style="fill:none;stroke:url(#linearGradient3024);stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
201+ d="M 120,25 V 5"
202+ id="path2712"
203+ sodipodi:nodetypes="cc"
204+ inkscape:label="tab" />
205+ </g>
206+</svg>
ui/src/assets/astrolabe.svgnew file+206
@@ -0,0 +1,206 @@
1+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2+<!-- Created with Inkscape (http://www.inkscape.org/) -->
3+
4+<svg
5+ width="240mm"
6+ height="240mm"
7+ viewBox="0 0 240 240"
8+ version="1.1"
9+ id="svg5"
10+ inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
11+ sodipodi:docname="astrolabe.svg"
12+ inkscape:export-filename="/Users/john/ws/urbit-apps/astrolabe/extras/astrolabe.png"
13+ inkscape:export-xdpi="96"
14+ inkscape:export-ydpi="96"
15+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
16+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
17+ xmlns:xlink="http://www.w3.org/1999/xlink"
18+ xmlns="http://www.w3.org/2000/svg"
19+ xmlns:svg="http://www.w3.org/2000/svg">
20+ <sodipodi:namedview
21+ id="namedview7"
22+ pagecolor="#ffffff"
23+ bordercolor="#999999"
24+ borderopacity="1"
25+ inkscape:pageshadow="0"
26+ inkscape:pageopacity="0"
27+ inkscape:pagecheckerboard="0"
28+ inkscape:document-units="mm"
29+ showgrid="false"
30+ inkscape:zoom="0.4798268"
31+ inkscape:cx="377.21945"
32+ inkscape:cy="262.59475"
33+ inkscape:window-width="1549"
34+ inkscape:window-height="1080"
35+ inkscape:window-x="490"
36+ inkscape:window-y="130"
37+ inkscape:window-maximized="0"
38+ inkscape:current-layer="layer1" />
39+ <defs
40+ id="defs2">
41+ <linearGradient
42+ id="navy"
43+ inkscape:swatch="solid">
44+ <stop
45+ style="stop-color:#1f243c;stop-opacity:1;"
46+ offset="0"
47+ id="stop4358" />
48+ </linearGradient>
49+ <linearGradient
50+ id="linearGradient3070"
51+ inkscape:swatch="solid">
52+ <stop
53+ style="stop-color:#ffff00;stop-opacity:1;"
54+ offset="0"
55+ id="stop3068" />
56+ </linearGradient>
57+ <linearGradient
58+ id="linearGradient3064"
59+ inkscape:swatch="solid">
60+ <stop
61+ style="stop-color:#ff3500;stop-opacity:1;"
62+ offset="0"
63+ id="stop3062" />
64+ </linearGradient>
65+ <linearGradient
66+ id="linearGradient3040"
67+ inkscape:swatch="solid">
68+ <stop
69+ style="stop-color:#fcd34d;stop-opacity:1;"
70+ offset="0"
71+ id="stop3038" />
72+ </linearGradient>
73+ <linearGradient
74+ id="linearGradient3034"
75+ inkscape:swatch="solid">
76+ <stop
77+ style="stop-color:#f2c11c;stop-opacity:1;"
78+ offset="0"
79+ id="stop3032" />
80+ </linearGradient>
81+ <linearGradient
82+ id="linearGradient3028"
83+ inkscape:swatch="solid">
84+ <stop
85+ style="stop-color:#f2e41c;stop-opacity:1;"
86+ offset="0"
87+ id="stop3026" />
88+ </linearGradient>
89+ <linearGradient
90+ id="gold"
91+ inkscape:swatch="solid">
92+ <stop
93+ style="stop-color:#fcd34d;stop-opacity:1;"
94+ offset="0"
95+ id="stop3020" />
96+ </linearGradient>
97+ <linearGradient
98+ inkscape:collect="always"
99+ xlink:href="#gold"
100+ id="linearGradient3024"
101+ x1="95"
102+ y1="47.5"
103+ x2="105"
104+ y2="47.5"
105+ gradientUnits="userSpaceOnUse"
106+ gradientTransform="translate(20,-30)" />
107+ <linearGradient
108+ inkscape:collect="always"
109+ xlink:href="#gold"
110+ id="linearGradient3030"
111+ x1="0"
112+ y1="150"
113+ x2="200"
114+ y2="150"
115+ gradientUnits="userSpaceOnUse"
116+ gradientTransform="translate(20,-30)" />
117+ <linearGradient
118+ inkscape:collect="always"
119+ xlink:href="#gold"
120+ id="linearGradient3036"
121+ x1="60.000027"
122+ y1="170"
123+ x2="179.99998"
124+ y2="170"
125+ gradientUnits="userSpaceOnUse"
126+ gradientTransform="matrix(1.0909095,0,0,1.0909095,4.090855,-50.454621)" />
127+ <linearGradient
128+ inkscape:collect="always"
129+ xlink:href="#gold"
130+ id="linearGradient3066"
131+ x1="27.225779"
132+ y1="154.82091"
133+ x2="161.28355"
134+ y2="154.82091"
135+ gradientUnits="userSpaceOnUse"
136+ gradientTransform="rotate(19,199.63646,194.75765)" />
137+ <linearGradient
138+ inkscape:collect="always"
139+ xlink:href="#gold"
140+ id="linearGradient3072"
141+ x1="90"
142+ y1="150"
143+ x2="110"
144+ y2="150"
145+ gradientUnits="userSpaceOnUse"
146+ gradientTransform="translate(20,-30)" />
147+ <linearGradient
148+ inkscape:collect="always"
149+ xlink:href="#navy"
150+ id="linearGradient4362"
151+ x1="0"
152+ y1="120"
153+ x2="240"
154+ y2="120"
155+ gradientUnits="userSpaceOnUse"
156+ gradientTransform="matrix(1.5,0,0,1.5,-59.999998,-59.999998)" />
157+ </defs>
158+ <g
159+ inkscape:label="Layer 1"
160+ inkscape:groupmode="layer"
161+ id="layer1">
162+ <rect
163+ style="display:inline;fill:url(#linearGradient4362);fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
164+ id="rect4185"
165+ width="360"
166+ height="360"
167+ x="-60"
168+ y="-60"
169+ inkscape:label="bg" />
170+ <circle
171+ style="display:inline;fill:none;fill-rule:evenodd;stroke:url(#linearGradient3030);stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
172+ id="path31"
173+ cx="120"
174+ cy="120"
175+ r="95"
176+ inkscape:label="mater plate" />
177+ <circle
178+ style="display:inline;fill:none;fill-rule:evenodd;stroke:url(#linearGradient3036);stroke-width:9.99995;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
179+ id="circle996"
180+ cx="135"
181+ cy="134.99998"
182+ r="60.000023"
183+ inkscape:label="rete" />
184+ <circle
185+ style="fill:url(#linearGradient3072);fill-opacity:1;stroke:none;stroke-width:9.99999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
186+ id="path1284"
187+ cx="120"
188+ cy="120"
189+ r="10"
190+ inkscape:label="center" />
191+ <path
192+ style="display:inline;fill:url(#linearGradient3066);fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
193+ d="m 35.977829,152.25317 140.036991,-53.75521 -5.75214,12.9195 -46.679,17.91834 -7.16733,-18.67158 -74.686466,28.66941 z"
194+ id="path1819"
195+ sodipodi:nodetypes="ccccccc"
196+ inkscape:transform-center-y="5.3755585"
197+ inkscape:transform-center-x="14.003679"
198+ inkscape:label="alidade" />
199+ <path
200+ style="fill:none;stroke:url(#linearGradient3024);stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
201+ d="M 120,25 V 5"
202+ id="path2712"
203+ sodipodi:nodetypes="cc"
204+ inkscape:label="tab" />
205+ </g>
206+</svg>
ui/src/components/Doc.sveltedeleted−29
@@ -1,29 +0,0 @@
1−<script lang="ts">
2− import { createEventDispatcher } from 'svelte';
3− import DocContent from './DocContent.svelte';
4− import Hamburger from './buttons/Hamburger.svelte';
5−
6− export let path: string;
7−
8− const dispatch = createEventDispatcher();
9− function close() {
10− dispatch('close');
11− }
12−
13− function navigate(path) {
14− dispatch('navigate', path);
15− }
16−</script>
17−
18−<div class="p-8 rounded-lg bg-white">
19− <div class="flex">
20− <Hamburger />
21− <div class="flex-grow text-center text-xl">
22− Help
23− </div>
24− <button class="w-10" on:click={close}>
25− X
26− </button>
27− </div>
28− <DocContent {path} on:navigate />
29−</div>
ui/src/components/HelpModal.svelte+17−3
@@ -1,11 +1,25 @@
1<script lang="ts">
1<script lang="ts">
2 import docs from '../stores/docs';
2 import docs from '../stores/docs';
3− import Doc from './Doc.svelte';
3+ import Doc from './docs/Doc.svelte';
4
4
5− // $: title = path ? capitalizeWords(path.replace(/-/g, ' ')) : 'Help';
5+ function close() {
6+ docs.hide()
7+ }
6
8
9+ function navigate({ detail: path }) {
10+ docs.show(path);
11+ }
7</script>
12</script>
8
13
9{#if $docs.show}
14{#if $docs.show}
15+ <div class="absolute w-full h-full bg-navy opacity-50 cursor-pointer z-10" on:click/>
16+ <div class="absolute w-full h-full z-10 overflow-y-auto" on:click={close}>
17+ <div class="mx-4 2xs:mx-8 md:max-w-xl md:mx-auto">
18+ <div class="py-4 2xs:py-8">
19+ <div on:click|stopPropagation>
10−<Doc path={$docs.path} on:close={() => docs.hide()} on:navigate={(event) => docs.show(event.detail)} />
20+ <Doc path={$docs.path} on:close={close} on:navigate={navigate} />
21+ </div>
22+ </div>
23+ </div>
24+ </div>
11{/if}
25{/if}
ui/src/components/buttons/CloseButton.sveltenew file+4
@@ -0,0 +1,4 @@
1+<button on:click class="relative w-7 h-7">
2+ <div class="absolute -mt-0.5 h-1 w-full bg-navy rounded rotate-45" />
3+ <div class="absolute -mt-0.5 h-1 w-full bg-navy rounded -rotate-45" />
4+</button>
ui/src/components/buttons/Hamburger.svelte+5−5
@@ -1,5 +1,5 @@
1−<div class="w-10 space-y-2">
1+<button on:click class="w-7 space-y-1 p-1">
2− <div class="h-2 w-full bg-navy rounded" />
2+ <div class="h-1 w-full bg-navy rounded" />
3− <div class="h-2 w-full bg-navy rounded" />
3+ <div class="h-1 w-full bg-navy rounded" />
4− <div class="h-2 w-full bg-navy rounded" />
4+ <div class="h-1 w-full bg-navy rounded" />
5−</div>
5+</button>
ui/src/components/docs/Doc.sveltenew file+41
@@ -0,0 +1,41 @@
1+<script lang="ts">
2+ import { createEventDispatcher } from 'svelte';
3+ import DocContent from './DocContent.svelte';
4+ import DocHome from './DocHome.svelte';
5+ import Hamburger from '../buttons/Hamburger.svelte';
6+ import CloseButton from '../buttons/CloseButton.svelte';
7+
8+ export let path: string;
9+
10+ $: homePage = path === '';
11+
12+ const dispatch = createEventDispatcher();
13+ function close() {
14+ dispatch('close');
15+ }
16+
17+ function navigate(path) {
18+ dispatch('navigate', path);
19+ }
20+</script>
21+
22+<div class=" rounded-lg bg-white">
23+ <div class="flex p-4 border-navy">
24+ {#if !homePage}
25+ <Hamburger on:click={() => navigate('')} />
26+ {:else}
27+ <div class="w-7 h-7" />
28+ {/if}
29+ <div class="flex-grow text-center text-xl">
30+ Help
31+ </div>
32+ <CloseButton on:click={close} />
33+ </div>
34+ <div class="p-8 pt-0">
35+ {#if !homePage}
36+ <DocContent {path} on:navigate />
37+ {:else}
38+ <DocHome on:navigate />
39+ {/if}
40+ </div>
41+</div>
ui/src/components/DocContent.svelte → ui/src/components/docs/DocContent.svelterenamed+2−2
@@ -2,8 +2,8 @@
2
2
3 import { createEventDispatcher } from 'svelte';
3 import { createEventDispatcher } from 'svelte';
4
4
5− import docLinks from "../actions/docLinks";
5+ import docLinks from "../../actions/docLinks";
6− import docs from "../stores/docs";
6+ import docs from "../../stores/docs";
7
7
8 export let path:string;
8 export let path:string;
9
9
ui/src/components/docs/DocHome.sveltenew file+48
@@ -0,0 +1,48 @@
1+<script lang="ts">
2+ import DocLink from "./DocLink.svelte";
3+
4+ function convertLinks(html: string): string {
5+ let converted = html;
6+ const externalLinkRegex = /href="http/g;
7+ converted = converted.replace(externalLinkRegex, 'target="_blank" href="http');
8+ return converted;
9+ }
10+</script>
11+
12+<div class="doc">
13+ <h1 class="text-center">Table of Contents</h1>
14+ <DocLink path="urbit-id" on:navigate>
15+ <h2>What is an Urbit ID?</h2>
16+ </DocLink>
17+ <!-- <h2>Ship Classes</h2> -->
18+ <ul>
19+ <li>
20+ <DocLink path="galaxy" on:navigate>
21+ <h3>Galaxies</h3>
22+ </DocLink>
23+ </li>
24+ <li>
25+ <DocLink path="star" on:navigate>
26+ <h3>Stars</h3>
27+ </DocLink>
28+ </li>
29+ <li>
30+ <DocLink path="planet" on:navigate>
31+ <h3>Planets</h3>
32+ </DocLink>
33+ </li>
34+ <li>
35+ <DocLink path="moon" on:navigate>
36+ <h3>Moons</h3>
37+ </DocLink>
38+ </li>
39+ <li>
40+ <DocLink path="comet" on:navigate>
41+ <h3>Comets</h3>
42+ </DocLink>
43+ </li>
44+ </ul>
45+ <DocLink path="keys" on:navigate>
46+ <h2>Keys</h2>
47+ </DocLink>
48+</div>
ui/src/components/docs/DocLink.sveltenew file+14
@@ -0,0 +1,14 @@
1+<script lang="ts">
2+
3+ import { createEventDispatcher } from 'svelte';
4+ export let path:string;
5+
6+ const dispatch = createEventDispatcher();
7+ function navigate() {
8+ dispatch('navigate', path);
9+ }
10+</script>
11+
12+<a href="javascript:void(0)" on:click={navigate}>
13+ <slot />
14+</a>
ui/src/routes/HelpPage.svelte+10−2
@@ -1,9 +1,15 @@
1<script lang="ts">
1<script lang="ts">
2+ import { onMount } from 'svelte';
2 import { push } from 'svelte-spa-router';
3 import { push } from 'svelte-spa-router';
4+ import docs from '../stores/docs';
3− import Doc from '../components/Doc.svelte';
5+ import Doc from '../components/docs/Doc.svelte';
4 export let params: any = {};
6 export let params: any = {};
5 $: path = params.path || '';
7 $: path = params.path || '';
6
8
9+ onMount(() => {
10+ docs.hide();
11+ });
12+
7 // $: title = path ? capitalizeWords(path.replace(/-/g, ' ')) : 'Help';
13 // $: title = path ? capitalizeWords(path.replace(/-/g, ' ')) : 'Help';
8
14
9 function closeDoc() {
15 function closeDoc() {
@@ -15,4 +21,6 @@
15 }
21 }
16</script>
22</script>
17
23
24+<div class="m-4 2xs:m-8 md:max-w-xl md:mx-auto">
18−<Doc {path} on:close={closeDoc} on:navigate={navigate} />
25+ <Doc {path} on:close={closeDoc} on:navigate={navigate} />
26+</div>
ui/src/routes/ShipViewPage.svelte+10−3
@@ -6,7 +6,7 @@
6 import SearchBar from "../components/SearchBar.svelte";
6 import SearchBar from "../components/SearchBar.svelte";
7 import ShipView from '../components/ShipView.svelte';
7 import ShipView from '../components/ShipView.svelte';
8 import ValidationProblems from '../components/ValidationProblems.svelte';
8 import ValidationProblems from '../components/ValidationProblems.svelte';
9− import DocModal from '../components/Doc.svelte';
9+ import DocModal from '../components/docs/Doc.svelte';
10 export let params: any = {};
10 export let params: any = {};
11 let patp: string;
11 let patp: string;
12 let analysis: SearchAnalysis = new SearchAnalysis();
12 let analysis: SearchAnalysis = new SearchAnalysis();
@@ -36,10 +36,17 @@
36 <!-- <a use:link={"/"} class="p-4 bg-white rounded-lg text-center">Go Home</a> -->
36 <!-- <a use:link={"/"} class="p-4 bg-white rounded-lg text-center">Go Home</a> -->
37 <!-- <SearchBar bind:searchText={search} bind:analysis /> -->
37 <!-- <SearchBar bind:searchText={search} bind:analysis /> -->
38 <SearchBar bind:analysis bind:search />
38 <SearchBar bind:analysis bind:search />
39+ <div class="flex">
39− <button on:click={() => docs.show('urbit-id')}>docs</button>
40+ <button class="bg-white" on:click={() => docs.show('urbit-id')}>urbit id</button>
41+ <button class="bg-white" on:click={() => docs.show('keys')}>key</button>
42+ </div>
40 {#if analysis.patpIsValid}
43 {#if analysis.patpIsValid}
41− <ShipView patp={analysis.patp} />
44+ <ShipView patp={analysis.patp} />
42 {:else if (search.length > 0)}
45 {:else if (search.length > 0)}
43 <ValidationProblems problems={analysis.patpProblems} />
46 <ValidationProblems problems={analysis.patpProblems} />
44 {/if}
47 {/if}
48+ <div class="flex">
49+ <button class="bg-white" on:click={() => docs.show('urbit-id')}>urbit id</button>
50+ <button class="bg-white" on:click={() => docs.show('keys')}>key</button>
51+ </div>
45</div>
52</div>
ui/src/styles/docs.scss+15−3
@@ -1,6 +1,6 @@
1.doc {
1.doc {
2 h1, h2, h3, h4 {
2 h1, h2, h3, h4 {
3− @apply font-bold;
3+ @apply font-bold mt-2 py-2;
4 }
4 }
5
5
6 h1 {
6 h1 {
@@ -15,11 +15,19 @@
15 @apply text-lg
15 @apply text-lg
16 }
16 }
17
17
18+ p {
19+ @apply py-2;
20+ }
21+
18 ul, ol {
22 ul, ol {
19 @apply list-inside;
23 @apply list-inside;
20
24
21− li p {
25+ li {
26+ @apply py-1;
27+
28+ & * {
22− @apply inline;
29+ @apply inline;
30+ }
23 }
31 }
24 }
32 }
25
33
@@ -30,4 +38,8 @@
30 ol {
38 ol {
31 @apply list-decimal;
39 @apply list-decimal;
32 }
40 }
41+
42+ code {
43+ @apply bg-orange-gold px-0.5 rounded;
44+ }
33}
45}
ui/src/styles/styles.scss+1−1
@@ -3,7 +3,7 @@
3@import 'docs.scss';
3@import 'docs.scss';
4
4
5body {
5body {
6− @apply bg-navy;
6+ @apply bg-navy w-[100vw] h-[100vh] overflow-auto;
7}
7}
8
8
9a {
9a {
ui/src/styles/tailwind-output.css+148−6
@@ -424,6 +424,12 @@ Ensure the default browser behavior of the `hidden` attribute.
424 --tw-backdrop-saturate: ;
424 --tw-backdrop-saturate: ;
425 --tw-backdrop-sepia: ;
425 --tw-backdrop-sepia: ;
426}
426}
427+.pointer-events-none {
428+ pointer-events: none;
429+}
430+.pointer-events-auto {
431+ pointer-events: auto;
432+}
427.visible {
433.visible {
428 visibility: visible;
434 visibility: visible;
429}
435}
@@ -436,12 +442,21 @@ Ensure the default browser behavior of the `hidden` attribute.
436.right-0 {
442.right-0 {
437 right: 0px;
443 right: 0px;
438}
444}
439−.m-8 {
445+.top-0 {
440− margin: 2rem;
446+ top: 0px;
447+}
448+.z-10 {
449+ z-index: 10;
450+}
451+.z-20 {
452+ z-index: 20;
441}
453}
442.m-4 {
454.m-4 {
443 margin: 1rem;
455 margin: 1rem;
444}
456}
457+.m-8 {
458+ margin: 2rem;
459+}
445.-m-2 {
460.-m-2 {
446 margin: -0.5rem;
461 margin: -0.5rem;
447}
462}
@@ -453,6 +468,14 @@ Ensure the default browser behavior of the `hidden` attribute.
453 margin-left: auto;
468 margin-left: auto;
454 margin-right: auto;
469 margin-right: auto;
455}
470}
471+.mx-4 {
472+ margin-left: 1rem;
473+ margin-right: 1rem;
474+}
475+.my-4 {
476+ margin-top: 1rem;
477+ margin-bottom: 1rem;
478+}
456.mt-2 {
479.mt-2 {
457 margin-top: 0.5rem;
480 margin-top: 0.5rem;
458}
481}
@@ -492,6 +515,12 @@ Ensure the default browser behavior of the `hidden` attribute.
492.ml-2 {
515.ml-2 {
493 margin-left: 0.5rem;
516 margin-left: 0.5rem;
494}
517}
518+.-mt-0\.5 {
519+ margin-top: -0.125rem;
520+}
521+.-mt-0 {
522+ margin-top: -0px;
523+}
495.block {
524.block {
496 display: block;
525 display: block;
497}
526}
@@ -516,6 +545,9 @@ Ensure the default browser behavior of the `hidden` attribute.
516.hidden {
545.hidden {
517 display: none;
546 display: none;
518}
547}
548+.h-full {
549+ height: 100%;
550+}
519.h-10 {
551.h-10 {
520 height: 2.5rem;
552 height: 2.5rem;
521}
553}
@@ -528,9 +560,18 @@ Ensure the default browser behavior of the `hidden` attribute.
528.h-12 {
560.h-12 {
529 height: 3rem;
561 height: 3rem;
530}
562}
563+.h-\[100vh\] {
564+ height: 100vh;
565+}
531.h-2 {
566.h-2 {
532 height: 0.5rem;
567 height: 0.5rem;
533}
568}
569+.h-1 {
570+ height: 0.25rem;
571+}
572+.h-7 {
573+ height: 1.75rem;
574+}
534.w-10 {
575.w-10 {
535 width: 2.5rem;
576 width: 2.5rem;
536}
577}
@@ -540,6 +581,12 @@ Ensure the default browser behavior of the `hidden` attribute.
540.w-12 {
581.w-12 {
541 width: 3rem;
582 width: 3rem;
542}
583}
584+.w-\[100vw\] {
585+ width: 100vw;
586+}
587+.w-7 {
588+ width: 1.75rem;
589+}
543.min-w-0 {
590.min-w-0 {
544 min-width: 0px;
591 min-width: 0px;
545}
592}
@@ -552,6 +599,12 @@ Ensure the default browser behavior of the `hidden` attribute.
552.max-w-sm {
599.max-w-sm {
553 max-width: 24rem;
600 max-width: 24rem;
554}
601}
602+.max-w-3xl {
603+ max-width: 48rem;
604+}
605+.max-w-2xl {
606+ max-width: 42rem;
607+}
555.flex-shrink-0 {
608.flex-shrink-0 {
556 flex-shrink: 0;
609 flex-shrink: 0;
557}
610}
@@ -570,9 +623,20 @@ Ensure the default browser behavior of the `hidden` attribute.
570.border-collapse {
623.border-collapse {
571 border-collapse: collapse;
624 border-collapse: collapse;
572}
625}
626+.rotate-45 {
627+ --tw-rotate: 45deg;
628+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
629+}
630+.-rotate-45 {
631+ --tw-rotate: -45deg;
632+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
633+}
573.transform {
634.transform {
574 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
635 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
575}
636}
637+.cursor-pointer {
638+ cursor: pointer;
639+}
576.resize {
640.resize {
577 resize: both;
641 resize: both;
578}
642}
@@ -630,9 +694,15 @@ Ensure the default browser behavior of the `hidden` attribute.
630.justify-self-end {
694.justify-self-end {
631 justify-self: end;
695 justify-self: end;
632}
696}
697+.overflow-auto {
698+ overflow: auto;
699+}
633.overflow-scroll {
700.overflow-scroll {
634 overflow: scroll;
701 overflow: scroll;
635}
702}
703+.overflow-y-auto {
704+ overflow-y: auto;
705+}
636.break-words {
706.break-words {
637 overflow-wrap: break-word;
707 overflow-wrap: break-word;
638}
708}
@@ -648,6 +718,9 @@ Ensure the default browser behavior of the `hidden` attribute.
648.rounded-full {
718.rounded-full {
649 border-radius: 9999px;
719 border-radius: 9999px;
650}
720}
721+.rounded {
722+ border-radius: 0.25rem;
723+}
651.border {
724.border {
652 border-width: 1px;
725 border-width: 1px;
653}
726}
@@ -658,6 +731,14 @@ Ensure the default browser behavior of the `hidden` attribute.
658 --tw-border-opacity: 1;
731 --tw-border-opacity: 1;
659 border-color: rgb(255 255 255 / var(--tw-border-opacity));
732 border-color: rgb(255 255 255 / var(--tw-border-opacity));
660}
733}
734+.border-black {
735+ --tw-border-opacity: 1;
736+ border-color: rgb(0 0 0 / var(--tw-border-opacity));
737+}
738+.border-navy {
739+ --tw-border-opacity: 1;
740+ border-color: rgb(31 36 60 / var(--tw-border-opacity));
741+}
661.bg-white {
742.bg-white {
662 --tw-bg-opacity: 1;
743 --tw-bg-opacity: 1;
663 background-color: rgb(255 255 255 / var(--tw-bg-opacity));
744 background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -666,6 +747,10 @@ Ensure the default browser behavior of the `hidden` attribute.
666 --tw-bg-opacity: 1;
747 --tw-bg-opacity: 1;
667 background-color: rgb(252 211 77 / var(--tw-bg-opacity));
748 background-color: rgb(252 211 77 / var(--tw-bg-opacity));
668}
749}
750+.bg-navy {
751+ --tw-bg-opacity: 1;
752+ background-color: rgb(31 36 60 / var(--tw-bg-opacity));
753+}
669.bg-black {
754.bg-black {
670 --tw-bg-opacity: 1;
755 --tw-bg-opacity: 1;
671 background-color: rgb(0 0 0 / var(--tw-bg-opacity));
756 background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -674,6 +759,10 @@ Ensure the default browser behavior of the `hidden` attribute.
674 --tw-bg-opacity: 1;
759 --tw-bg-opacity: 1;
675 background-color: rgb(209 213 219 / var(--tw-bg-opacity));
760 background-color: rgb(209 213 219 / var(--tw-bg-opacity));
676}
761}
762+.bg-orange-gold {
763+ --tw-bg-opacity: 1;
764+ background-color: rgb(247 211 146 / var(--tw-bg-opacity));
765+}
677.bg-amber-300 {
766.bg-amber-300 {
678 --tw-bg-opacity: 1;
767 --tw-bg-opacity: 1;
679 background-color: rgb(252 211 77 / var(--tw-bg-opacity));
768 background-color: rgb(252 211 77 / var(--tw-bg-opacity));
@@ -706,10 +795,6 @@ Ensure the default browser behavior of the `hidden` attribute.
706 --tw-bg-opacity: 1;
795 --tw-bg-opacity: 1;
707 background-color: rgb(133 77 14 / var(--tw-bg-opacity));
796 background-color: rgb(133 77 14 / var(--tw-bg-opacity));
708}
797}
709−.bg-navy {
710− --tw-bg-opacity: 1;
711− background-color: rgb(31 36 60 / var(--tw-bg-opacity));
712−}
713.bg-amber-200 {
798.bg-amber-200 {
714 --tw-bg-opacity: 1;
799 --tw-bg-opacity: 1;
715 background-color: rgb(253 230 138 / var(--tw-bg-opacity));
800 background-color: rgb(253 230 138 / var(--tw-bg-opacity));
@@ -748,6 +833,14 @@ Ensure the default browser behavior of the `hidden` attribute.
748 padding-top: 0.5rem;
833 padding-top: 0.5rem;
749 padding-bottom: 0.5rem;
834 padding-bottom: 0.5rem;
750}
835}
836+.px-0\.5 {
837+ padding-left: 0.125rem;
838+ padding-right: 0.125rem;
839+}
840+.px-0 {
841+ padding-left: 0px;
842+ padding-right: 0px;
843+}
751.px-3 {
844.px-3 {
752 padding-left: 0.75rem;
845 padding-left: 0.75rem;
753 padding-right: 0.75rem;
846 padding-right: 0.75rem;
@@ -760,6 +853,25 @@ Ensure the default browser behavior of the `hidden` attribute.
760 padding-left: 0.25rem;
853 padding-left: 0.25rem;
761 padding-right: 0.25rem;
854 padding-right: 0.25rem;
762}
855}
856+.py-4 {
857+ padding-top: 1rem;
858+ padding-bottom: 1rem;
859+}
860+.pb-8 {
861+ padding-bottom: 2rem;
862+}
863+.pb-4 {
864+ padding-bottom: 1rem;
865+}
866+.pb-2 {
867+ padding-bottom: 0.5rem;
868+}
869+.pb-0 {
870+ padding-bottom: 0px;
871+}
872+.pt-0 {
873+ padding-top: 0px;
874+}
763.text-center {
875.text-center {
764 text-align: center;
876 text-align: center;
765}
877}
@@ -808,6 +920,9 @@ Ensure the default browser behavior of the `hidden` attribute.
808 font-size: 1rem;
920 font-size: 1rem;
809 line-height: 1.5rem;
921 line-height: 1.5rem;
810}
922}
923+.font-bold {
924+ font-weight: 700;
925+}
811.leading-4 {
926.leading-4 {
812 line-height: 1rem;
927 line-height: 1rem;
813}
928}
@@ -861,6 +976,9 @@ Ensure the default browser behavior of the `hidden` attribute.
861 -webkit-text-decoration-line: underline;
976 -webkit-text-decoration-line: underline;
862 text-decoration-line: underline;
977 text-decoration-line: underline;
863}
978}
979+.opacity-50 {
980+ opacity: 0.5;
981+}
864.opacity-10 {
982.opacity-10 {
865 opacity: 0.1;
983 opacity: 0.1;
866}
984}
@@ -886,13 +1004,37 @@ Ensure the default browser behavior of the `hidden` attribute.
886 .\32xs\:m-8 {
1004 .\32xs\:m-8 {
887 margin: 2rem;
1005 margin: 2rem;
888 }
1006 }
1007+
1008+ .\32xs\:mx-8 {
1009+ margin-left: 2rem;
1010+ margin-right: 2rem;
1011+ }
1012+
1013+ .\32xs\:my-8 {
1014+ margin-top: 2rem;
1015+ margin-bottom: 2rem;
1016+ }
1017+
1018+ .\32xs\:py-8 {
1019+ padding-top: 2rem;
1020+ padding-bottom: 2rem;
1021+ }
889}
1022}
890@media (min-width: 768px) {
1023@media (min-width: 768px) {
891
1024
1025+ .md\:mx-auto {
1026+ margin-left: auto;
1027+ margin-right: auto;
1028+ }
1029+
892 .md\:min-w-\[256px\] {
1030 .md\:min-w-\[256px\] {
893 min-width: 256px;
1031 min-width: 256px;
894 }
1032 }
895
1033
1034+ .md\:max-w-xl {
1035+ max-width: 36rem;
1036+ }
1037+
896 .md\:max-w-2xl {
1038 .md\:max-w-2xl {
897 max-width: 42rem;
1039 max-width: 42rem;
898 }
1040 }
ui/tailwind.config.cjs+1
@@ -11,6 +11,7 @@ module.exports = {
11 colors: {
11 colors: {
12 navy: '#1f243c',
12 navy: '#1f243c',
13 gold: '#fcd34d',
13 gold: '#fcd34d',
14+ 'orange-gold': '#f7d392',
14 }
15 }
15 },
16 },
16 screens: {
17 screens: {