Add "made with" page

Signed-off-by: Nico Burns <nico@nicoburns.com>

Author: nicoburns

_data/madewith.json

@@ -0,0 +1,42 @@
+[
+    {
+        "name": "Browser UIs",
+        "projects":
+        [
+            {
+                "key": "servoshell",
+                "name": "Servoshell",
+                "link": "https://github.com/servo/servo/tree/main/ports/servoshell",
+                "img": "/img/made-with/servoshell.png",
+                "description": "First-party browser UI built with egui and targeting the testing use case"
+            },
+            {
+                "key": "verso",
+                "name": "Verso",
+                "link": "https://github.com/versotile-org/verso/",
+                "img": "/img/made-with/verso.png",
+                "description": "A browser UI for Servo that implements the UI as HTML using Servo's own web rendering support"
+            },
+            {
+                "key": "kdab",
+                "name": "Servo Qt",
+                "link": "https://www.kdab.com/embedding-servo-in-qt/",
+                "img": "/img/made-with/servo-qt.png",
+                "description": "A Servo Webview as Qt widget, enabling browser UI built in Qt"
+            }
+        ]
+    },
+    {
+        "name": "Made with Servo Components",
+        "projects":
+        [
+            {
+                "key": "blitz",
+                "name": "Blitz",
+                "link": "https://github.com/DioxusLabs/blitz",
+                 "img": "/img/made-with/blitz.png",
+                 "description": "An HTML renderer and application runtime built on top of Stylo"
+            }
+        ]
+    }
+]

_data/menu.json

@@ -17,6 +17,7 @@
     "url": "#",
     "subpages": [
       { "title": "About Servo", "url": "/about/" },
+      { "title": "Made with Servo", "url": "/made-with/" },
       { "title": "Governance", "url": "https://github.com/servo/project/blob/main/governance/README.md", "external": true },
       { "title": "Sponsorship", "url": "/sponsorship/" },
       { "title": "Acknowledgements", "url": "/acknowledgements/" }

assets/img/made-with/blitz.png

@@ -0,0 +1,70 @@
+---
+layout: default.html
+title: Made With Servo
+---
+
+<style type="text/css">
+
+.made-with-container {
+  gap: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: start;
+  margin-bottom: 32px;
+}
+
+.made-with-item {
+  display: block;
+  width: 400px;
+  flex: 0 0 400px;
+  border: 2px solid #333;
+  cursor: pointer;
+  color: inherit;
+  text-decoration: inherit;
+}
+
+.made-with-item:hover {
+  background-color: rgba(27, 131, 129, 0.5);
+  background-color: #EAEAEA;
+}
+
+.made-with-text {
+  padding: 20px;
+}
+
+.made-with-text > p {
+  padding: 0;
+}
+
+</style>
+
+<div class="inner-container">
+
+<h1>{{ title }}</h1>
+<p class="subtitle" style="margin-bottom: 32px">
+  This page showcases projects that are built with Servo or Servo components
+</p>
+
+{% for group in madewith %}
+
+### {{group.name}}
+
+<div class="made-with-container">
+
+  {% for project in group.projects %}
+
+  <a class="made-with-item" href="{{project.link}}" target="_blank">
+    <img src="{{ project.img | url }}" alt=" " />
+    <div class="made-with-text">
+      <h4>{{ project.name }}</h4>
+      <p>{{ project.description }}</p>
+    </div>
+  </a>
+
+  {% endfor %}
+</div>
+
+{% endfor %}
+
+
+</div>