Skip to content

Commit 3aba257

Browse files
laurakalbaglaurakalbag
authored
Streamline info on docs homepage and remove repeating logo (#294)
1 parent 9b9b381 commit 3aba257

File tree

2 files changed

+21
-47
lines changed

2 files changed

+21
-47
lines changed

‎docs/about.mdx

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,21 @@
11
---
2-
title: Stately Studio + XState docs
2+
title: Stately + XState docs
33
slug: '/'
44
hide_title: true
55
---
66

7-
<h1 class="visually-hidden">Stately Studio and XState docs</h1>
7+
## Welcome to the Stately and XState docs
8+
9+
[Stately Studio](./docs/studio) is a suite of tools for visualizing and collaborating on your application logic, powered by XState.
810

911
<div class="docs-intro">
10-
<div class="docs-intro-studio">
11-
<h2 class="docs-intro-logo-heading" id="stately-studio">
12-
<svg alt="Stately" viewBox="0 0 818 222" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd"><path d="M128.76 45.638c12.601 0 22.817-10.216 22.817-22.819C151.577 10.217 141.361 0 128.76 0c-12.603 0-22.819 10.217-22.819 22.819 0 12.603 10.216 22.819 22.82 22.819M184.043 123.199v-.019L60.863 0c-17.822 17.823-17.722 46.619.101 64.442l39.2 39.199-.067.067 22.215 22.214c.807.807 1.341 1.921 1.341 3.152 0 1.265-.59 2.386-1.437 3.197l-25.91 25.91a4.44 4.44 0 0 1-6.278 0l-25.992-25.993a4.439 4.439 0 0 1 0-6.278c17.734-18.925 4.497-41.58-3.696-49.255l-5.795-5.795L2.6 122.805a8.878 8.878 0 0 0 0 12.555l84.257 84.257a8.876 8.876 0 0 0 12.554 0l84.077-84.077a8.392 8.392 0 0 0 2.987-6.426 8.387 8.387 0 0 0-2.432-5.915M300.643 104.22c-20.552-2.691-24.019-6.909-24.019-15.345 0-8.552 7.934-13.864 20.706-13.864 14.075 0 21.077 4.579 23.41 15.312l.072.332h11.86l-.062-.48c-2.016-15.886-14.545-24.635-35.28-24.635-19.13 0-33.014 10.228-33.014 24.321 0 17.686 16.455 22.317 34.234 24.686 18.518 2.603 24.164 6.447 24.164 16.454 0 9.39-9.542 16.205-22.69 16.205-20.702 0-24.914-9.122-26.382-18.979l-.053-.361h-12.73l.057.478c1.586 12.926 9.657 28.334 39.108 28.334 20.195 0 35.424-11.357 35.424-26.416 0-17.725-13.317-23.106-34.805-26.042M419.634 66.647h-72.125v11.295h29.484v77.627h13.158V77.942h29.483V66.647M447.382 119.996 463.5 77.088l16.117 42.908h-32.235Zm8.327-53.349-35.206 88.922h12.52l9.78-25.374h41.254l9.922 25.374h13.08l-34.633-88.922H455.71ZM508.888 77.942h29.484v77.627h13.159V77.942h29.482V66.647h-72.125v11.295M613.369 116.499h24.97v-11.174h-24.97V77.942h49.202V66.647H600.21v88.922h62.361v-11.295h-49.202v-27.775M697.083 66.647h-13.16v88.922h59.51v-11.295h-46.35V66.647M804.257 66.647l-25.294 40.544-26.279-40.544h-14.907l34.259 50.2v38.722h13.158v-38.605l32.391-50.317h-13.328"/></g></svg>
13-
</h2>
14-
<p>
15-
<a href="./docs/studio">Stately Studio</a> is a suite of tools for
16-
visualizing and collaborating on your application logic, powered by
17-
XState.
18-
</p>
19-
</div>
20-
<div class="docs-intro-xstate">
2112
<h2 class="docs-intro-logo-heading" id="xstate">
22-
<svg alt="XState" viewBox="0 0 818 222" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd"><path d="M349.953 70.14c20.78 0 33.34 8.767 35.358 24.687l.061.48H373.49l-.074-.333c-2.34-10.754-9.356-15.342-23.463-15.342-12.799 0-20.752 5.323-20.752 13.889 0 8.456 3.477 12.681 24.072 15.378 21.535 2.94 34.883 8.334 34.883 26.096 0 15.089-15.264 26.467-35.5 26.467-29.518 0-37.608-15.437-39.196-28.39l-.059-.478h12.76l.054.363c1.47 9.876 5.691 19.016 26.438 19.016 13.178 0 22.74-6.83 22.74-16.239 0-10.026-5.659-13.879-24.218-16.485-17.819-2.376-34.307-7.016-34.307-24.738 0-14.122 13.914-24.371 33.085-24.371Zm122.576 1.11v11.316h-29.547v77.787H429.79V82.566h-29.547V71.25h72.285Zm52.908 0 34.709 89.103h-13.108l-9.947-25.427h-41.344l-9.8 25.427h-12.549l35.283-89.104h16.756Zm108.826 0v11.316h-29.547v77.787h-13.188V82.569H561.98V71.252h72.282v-.003Zm81.737 0v11.316h-49.311v27.44h25.027v11.195h-25.027v27.832H716v11.317h-62.5v-89.1H716ZM516.49 81.711l-16.154 42.994h32.306l-16.153-42.994ZM106.363 27l33.464.272c3.251.026 6.31 1.54 8.304 4.108l119.56 154.056c2.71 3.488.22 8.564-4.192 8.564h-35.035c-3.31 0-6.432-1.543-8.44-4.172l-33.345-45.635-36.905 45.777a10.623 10.623 0 0 1-8.33 4.03H106.32c-4.437 0-6.917-5.122-4.165-8.603l58.543-74.144-58.595-75.718c-2.68-3.51-.154-8.569 4.263-8.532Zm157.091 0c4.46-.034 6.973 5.108 4.207 8.603l-52.239 66.006c-3.726-2.932-32.644-27.14-4.745-59.556 0 0 2.183-2.554 4.435-5.195l.436-.511.435-.51a676.11 676.11 0 0 0 3.842-4.533c2.759-3.339 5.03-4.005 8.247-4.03L263.454 27Z"/></g></svg>
13+
<svg alt="XState" viewBox="0 0 818 222" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd"><path d="M349.953 70.14c20.78 0 33.34 8.767 35.358 24.687l.061.48H373.49l-.074-.333c-2.34-10.754-9.356-15.342-23.463-15.342-12.799 0-20.752 5.323-20.752 13.889 0 8.456 3.477 12.681 24.072 15.378 21.535 2.94 34.883 8.334 34.883 26.096 0 15.089-15.264 26.467-35.5 26.467-29.518 0-37.608-15.437-39.196-28.39l-.059-.478h12.76l.054.363c1.47 9.876 5.691 19.016 26.438 19.016 13.178 0 22.74-6.83 22.74-16.239 0-10.026-5.659-13.879-24.218-16.485-17.819-2.376-34.307-7.016-34.307-24.738 0-14.122 13.914-24.371 33.085-24.371Zm122.576 1.11v11.316h-29.547v77.787H429.79V82.566h-29.547V71.25h72.285Zm52.908 0 34.709 89.103h-13.108l-9.947-25.427h-41.344l-9.8 25.427h-12.549l35.283-89.104h16.756Zm108.826 0v11.316h-29.547v77.787h-13.188V82.569H561.98V71.252h72.282v-.003Zm81.737 0v11.316h-49.311v27.44h25.027v11.195h-25.027v27.832H716v11.317h-62.5v-89.1H716ZM516.49 81.711l-16.154 42.994h32.306l-16.153-42.994ZM106.363 27l33.464.272c3.251.026 6.31 1.54 8.304 4.108l119.56 154.056c2.71 3.488.22 8.564-4.192 8.564h-35.035c-3.31 0-6.432-1.543-8.44-4.172l-33.345-45.635-36.905 45.777a10.623 10.623 0 0 1-8.33 4.03H106.32c-4.437 0-6.917-5.122-4.165-8.603l58.543-74.144-58.595-75.718c-2.68-3.51-.154-8.569 4.263-8.532Zm157.091 0c4.46-.034 6.973 5.108 4.207 8.603l-52.239 66.006c-3.726-2.932-32.644-27.14-4.745-59.556 0 0 2.183-2.554 4.435-5.195l.436-.511.435-.51a676.11 676.11 0 0 0 3.842-4.533c2.759-3.339 5.03-4.005 8.247-4.03L263.454 27Z"/></g></svg>
2314
</h2>
24-
<p>
25-
<a href="./docs/xstate">XState</a> is a best-in-class open source library
26-
for orchestrating and managing state in JavaScript and TypeScript apps.
27-
</p>
28-
</div>
15+
<p><a href="./docs/xstate">XState</a> is a best-in-class open source library
16+
for orchestrating and managing state in JavaScript and TypeScript apps.</p>
2917
</div>
3018

31-
## Welcome to the Stately Studio and XState docs
32-
3319
<ul className="content-boxes">
3420
<li>
3521
<a className="link-box" href="./docs/states">

‎src/css/custom.css

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1569,45 +1569,33 @@ a.link-box strong {
15691569

15701570
.docs-intro {
15711571
display: flex;
1572+
align-content: center;
15721573
flex-direction: row;
15731574
flex-wrap: wrap;
1574-
justify-content: center;
1575-
align-content: stretch;
1576-
align-items: stretch;
1577-
gap: 1rem;
1578-
margin: 2rem 0 1rem 0;
1579-
}
1580-
1581-
.docs-intro + h2 {
1582-
font-size: 1.6em;
1583-
text-align: center;
1575+
gap: 0.5rem;
1576+
margin: 2rem 0;
15841577
}
15851578

15861579
.docs-intro h2:hover a.hash-link {
15871580
opacity: 0;
15881581
}
15891582

1590-
.docs-intro-studio,
1591-
.docs-intro-xstate {
1592-
flex: 0 1 18rem;
1593-
font-weight: var(--ifm-font-weight-semibold);
1594-
}
1595-
1596-
@media (min-width: 570px) {
1597-
.docs-intro-studio,
1598-
.docs-intro-xstate {
1599-
flex: 0 1 calc(50% - 0.5rem);
1600-
}
1601-
}
1602-
16031583
.docs-intro svg {
16041584
display: block;
1605-
margin: 0 1rem;
1606-
width: 75%;
1585+
width: 100%;
1586+
}
1587+
1588+
.docs-intro h2 {
1589+
display: flex;
1590+
align-content: center;
1591+
margin: 0;
1592+
flex-basis: clamp(10rem, 15rem, 30%);
16071593
}
16081594

16091595
.docs-intro p {
1610-
padding: 0 1rem;
1596+
flex-grow: 1;
1597+
margin: 0;
1598+
flex-basis: 60%;
16111599
}
16121600

16131601
/* Tabs */

0 commit comments

Comments
 (0)