Add splash image to docs

docs/assets/styles/docs.css

@@ -163,6 +163,52 @@ a {
   margin-left: 1.5rem;
 }
 
+/* Splash */
+.splash {
+  display: flex;
+  margin-bottom: 2rem;
+}
+
+.splash-start {
+  min-width: 420px;
+}
+
+.splash-end {
+  display: flex;
+  align-items: flex-end;
+  width: auto;
+  padding-left: 1rem;
+}
+
+.splash-image {
+  width: 100%;
+  height: auto;
+}
+
+.splash-logo {
+  max-width: 22rem;
+}
+
+@media screen and (max-width: 1040px) {
+  .splash {
+    display: block;
+  }
+
+  .splash-start {
+    min-width: 0;
+    padding-bottom: 1rem;
+  }
+
+  .splash-end {
+    padding: 0;
+  }
+
+  .splash-image {
+    display: block;
+    max-width: 400px;
+  }
+}
+
 /* Content */
 .content {
   padding-top: 0;
@@ -172,10 +218,6 @@ a {
   max-width: 860px;
 }
 
-.markdown-section .logo {
-  max-width: 24rem;
-}
-
 .markdown-section ul {
   padding: 0 0 0 1.5rem;
   margin: 0;

docs/getting-started/overview.md

@@ -1,13 +1,19 @@
-<img class="logo" src="/assets/images/wordmark.svg" alt="Shoelace" data-no-zoom>
-
-A forward-thinking library of web components.
-
-- Works with all frameworks 🧩
-- Works with CDNs 🚛
-- Fully customizable with CSS 🎨
-- Open source 😸
-
-Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
+<div class="splash">
+  <div class="splash-start">
+    <img class="splash-logo" src="/assets/images/wordmark.svg" alt="Shoelace" data-no-zoom >
+    <p><strong>A forward-thinking library of web components.</strong></p>
+    <ul>
+      <li>Works with all frameworks 🧩</li>
+      <li>Works with CDNs 🚛</li>
+      <li>Fully customizable with CSS 🎨</li>
+      <li>Open source 😸</li>
+    </ul>
+    <p>Designed in New Hampshire by <a href="https://twitter.com/claviska" rel="noopener" target="_blank">Cory LaViska</a>.</p>
+  </div>
+  <div class="splash-end">
+    <img class="splash-image" src="/assets/images/undraw-content-team.svg" alt="Cartoon of people assembling components while standing on a giant laptop." data-no-zoom />
+  </div>
+</div>
 
 ## Quick Start
 
@@ -102,6 +108,7 @@ Special thanks to the following projects and individuals that helped make Shoela
 - Documentation is powered by [Docsify](https://docsify.js.org/)
 - Theme colors and form controls are inspired by [Element](element.eleme.io)
 - Icons are courtesy of [Bootstrap Icons](https://icons.getbootstrap.com/)
+- Illustrations are courtesy of [unDraw](https://undraw.co/)
 - Positioning of menus, tooltips, et al is handled by [Popper.js](https://popper.js.org/)
 - CDN services are provided by [unpkg](https://unpkg.com/)
 - The Shoelace logo was designed with a single shoelace by [Adam K Olson](https://twitter.com/adamkolson)