servo · mrego · Feb 3, 2025 · Jan 10, 2025 · Jan 24, 2025 · Jan 28, 2025
diff --git a/.eleventy.js b/.eleventy.js
@@ -4,13 +4,14 @@ const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 
 module.exports = function(eleventyConfig) {
-  eleventyConfig.setTemplateFormats(["md", "njk", "html", "css", "pdf"]);
+  eleventyConfig.setTemplateFormats(["md", "njk", "html", "css", "pdf", "liquid"]);
 
   eleventyConfig.addPassthroughCopy("CNAME");
   eleventyConfig.addPassthroughCopy({"assets/img": "img"});
   eleventyConfig.addPassthroughCopy({"assets/svg": "svg"});
   eleventyConfig.addPassthroughCopy({"node_modules/reveal.js/dist": "reveal.js/dist"});
   eleventyConfig.addPassthroughCopy({"node_modules/reveal.js/plugin": "reveal.js/plugin"});
+  eleventyConfig.addPassthroughCopy({"assets/reveal.js-theme": "reveal.js/dist/theme"});
   eleventyConfig.addPassthroughCopy({"slides": "slides"});
 
   eleventyConfig.addShortcode("currentYear", () => `${new Date().getFullYear()}`);

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -25,10 +25,6 @@ jobs:
             npm-
       - name: Install Node modules
         run: npm install
-      - name: Sass
-        run: npm run sass
-      - name: Sass Reveal.js
-        run: npm run sass-revealjs
       - name: Eleventy
         run: |
           npx eleventy --output='_site/' --pathprefix='/'

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -30,10 +30,6 @@ jobs:
             npm-
       - name: Install Node modules
         run: npm install
-      - name: Sass
-        run: npm run sass
-      - name: Sass Reveal.js
-        run: npm run sass-revealjs
       - name: Eleventy
         run: |
           npx eleventy \

diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,6 @@ _site/
 
 # npm assets
 node_modules/
+
+# macOS
+.DS_Store
diff --git a/_data/site.json b/_data/site.json
@@ -1,8 +1,9 @@
 {
-  "tagline": "Servo, the embeddable, independent, memory-safe, modular, parallel web rendering engine",
+  "tagline": "Servo aims to empower developers with a lightweight, high-performance alternative for embedding web technologies in applications.",
   "author": "The Servo Project Developers",
   "favicon": "/img/servo-symbol-color-no-container.png",
   "logo": "/img/servo-color-positive.png",
-  "logoNegative": "/img/servo-color-negative-no-container.png",
+  "logoPositive": "/img/servo-color-positive-no-container.png",
+  "logoMark": "/img/servo-color.png",
   "logoLFEurope": "/img/lf-europe-logo.png"
 }
diff --git a/_data/social.json b/_data/social.json
@@ -2,6 +2,5 @@
   { "title": "GitHub", "color": "github-color", "url": "https://github.com/servo/servo", "icon": "fab fa-github" },
   { "title": "Mastodon", "color": "mastodon-color", "url": "https://floss.social/@servo", "icon": "fab fa-mastodon" },
   { "title": "Bluesky", "color": "bluesky-color", "url": "https://bsky.app/profile/servo.org", "icon": "fab fa-bluesky" },
-  { "title": "Twitter", "color": "twitter-color", "url": "https://twitter.com/ServoDev", "icon": "fab fa-twitter" },
   { "title": "LinkedIn", "color": "linkedin-color", "url": "https://www.linkedin.com/company/servo-project/", "icon": "fab fa-linkedin" }
 ]
diff --git a/_includes/contact.html b/_includes/contact.html
@@ -0,0 +1,18 @@
+<div class="contact" aria-label="Contact information">
+    <div class="container">
+        <div class="inner-container two-column">
+            <div class="column">
+                <h2>Contact</h2>
+            </div>
+            <div class="column">
+                <ul>
+                    <li><a class="footer-link" href="https://servo.zulipchat.com/">Zulip chat</a></li>
+                    <li><a class="footer-link" href="https://github.com/servo/servo/discussions">GitHub discussions</a></li>
+                    <li><a class="footer-link" href="mailto:[email protected]">Email: [email protected]</a></li>
+                    <li><a class="footer-link" href="https://floss.social/@servo">Mastodon</a></li>
+                    <li><a class="footer-link" href="https://bsky.app/profile/servo.org">Bluesky</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/_includes/default.html b/_includes/default.html
@@ -4,12 +4,7 @@
   <body class="is-page">
     <main class="is-main">
       {% include "header.html" %}
-      <section class="section" style="padding-top: 0;">
-        <div class="container">
           <aside class="menu box">
-            <p class="menu-label">
-              {{ title }}
-            </p>
             {% for link in menu %}
               {% assign pagedir = page.url %}
               {% if link.url == pagedir %}
@@ -23,12 +18,13 @@
               {% endif %}
             {% endfor %}
           </aside>
-          <div class="content">
+          <div class="content container" id="{{ title }}">
             {{ content }}
           </div>
-        </div>
-      </section>
     </main>
-    {% include "footer.html" %}
+    {% include "contact.html" %}
+    <footer>
+      {% include "footer.html" %}
+    </footer>
   </body>
 </html>
diff --git a/_includes/download.html b/_includes/download.html
@@ -1,16 +1,17 @@
 ---
 layout: default
 ---
+<div class="subpage-content inner-container">
+  <h1 id="download">
+    Download
+    <a class="headline-hash" href="#download">
+      <span class="icon hashlink">
+        <i class="fas fa-link"></i>
+      </span>
+    </a>
+  </h1>
 
-<h1 id="download">
-  Download
-  <a class="headline-hash" href="#download">
-    <span class="icon hashlink">
-      <i class="fas fa-link"></i>
-    </span>
-  </a>
-</h1>
+  {% include "downloads.html" %}
 
-{% include "downloads.html" %}
-
-{{ content }}
+  {{ content }}
+</div>
diff --git a/_includes/downloads-list.html b/_includes/downloads-list.html
@@ -1,11 +1,9 @@
 <div class="downloads">
   {% for download in downloads %}
-  <p>
-    <div class="buttons has-addons">
-      <a rel="nofollow" role="button" class="button is-primary" href="https://download.servo.org/{{download.href}}" style="width: 22ch;">{{download.name}}</a>
+    <div class="buttons">
+      <a rel="nofollow" role="button" class="button" href="https://download.servo.org/{{download.href}}" style="width: 22ch;">{{download.name}}</a>
       <span class="button is-static" id="date-{{download.key}}" style="width: 10ch;">?</span>
       <a rel="nofollow" role="button" class="button" style="width: 7ch;" href="https://download.servo.org/{{download.sha256}}">sha256</a>
     </div>
-  </p>
   {% endfor %}
 </div>
diff --git a/_includes/downloads.html b/_includes/downloads.html
@@ -1,18 +1,17 @@
-<div class="container">
-  <div class="content">
-    <div class="columns">
-      <div class="column">
-        <p>
-          These pre-built nightly snapshots allow developers to try Servo and
-          <a href="https://github.com/servo/servo/issues/new">report issues</a> without
-          <a href="https://book.servo.org/hacking/building-servo.html">building Servo locally</a>.
-          <strong>Please don’t log into your bank with Servo just yet!</strong>
-        </p>
-      </div>
-      <div class="column">
-        {% include "downloads-list.html" %}
-        {% include "downloads-script.html" %}
-      </div>
+<div class="content">
+  <div class="columns">
+    <div class="column">
+      <p>
+        These pre-built nightly snapshots allow developers to try Servo and
+        <a href="https://github.com/servo/servo/issues/new">report issues</a> without
+        <a href="https://book.servo.org/hacking/building-servo.html">building Servo locally</a>.
+        <strong>Please don’t log into your bank with Servo just yet!</strong>
+      </p>
+    </div>
+    <div class="column">
+      {% include "downloads-list.html" %}
+      {% include "downloads-script.html" %}
     </div>
   </div>
 </div>
+
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,21 +1,18 @@
-<footer class="footer">
-  <div class="container" style="text-align: center;">
-    <a href="{{ '/coc/' | url }}">Code of Conduct</a> |
-    Contact: <a href="mailto:[email protected]">[email protected]</a>,
-    <a href="https://servo.zulipchat.com/">Zulip Chat</a>,
-    <a href="https://github.com/servo/servo/discussions">GitHub Discussions</a>,
-    <a href="https://floss.social/@servo">Mastodon</a>,
-    <a href="https://bsky.app/profile/servo.org">Bluesky</a>,
-    <a href="https://twitter.com/ServoDev">Twitter</a>,
-    <a href="https://www.linkedin.com/company/servo-project/">LinkedIn</a>
+<div class="footer">
+  <div class="container">
+    <div class="two-column inner-container">
+      <div class="column">
+        <div class="logo"><a href="https://linuxfoundation.eu"><img src="{{ site.logoLFEurope | url }}" alt="Linux Foundation Europe logo" width="250"></a></div>
+        <p>&copy; {% currentYear %} {{ site.author }}</p>
+        <p>Copyright &copy; Servo is a project of <a class="footer-link" href="https://linuxfoundation.eu/">Linux Foundation Europe</a>.</p>
+        <p>For website terms of use, trademark policy and other project policies please see <a class="footer-link" href="https://lfprojects.org">https://lfprojects.org</a>.</p>
+      </div>
+      <div class="column code-of-conduct">
+        <a class="footer-link" href="{{ '/coc/' | url }}">Code of Conduct</a>
+      </div>
   </div>
-  <div class="container" style="text-align: center; font-size: 0.875em;">
-    <p><a href="https://linuxfoundation.eu"><img src="{{ site.logoLFEurope | url }}" alt="Linux Foundation Europe logo" width="250" style="margin: 1em;"></a></p>
-    <p>&copy; {% currentYear %} {{ site.author }}</p>
-    <p>Copyright &copy; Servo is a project of <a href="https://linuxfoundation.eu/">Linux Foundation Europe</a>.</p>
-    <p>For website terms of use, trademark policy and other project policies please see <a href="https://lfprojects.org">https://lfprojects.org</a>.</p>
-  </div>
-</footer>
+</div>
+
 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
 <script>
   $(() => {

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,47 +1,65 @@
 <nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="container">
-    <div class="navbar-brand">
-      <a class="navbar-item" href="{{ '/' | url }}">
-        <img src="{{ site.logoNegative | url }}" alt="{{ title }}">
-      </a>
+    <div class="inner-container">
+      <div class="navbar-brand">
+        <a href="{{ '/' | url }}">
+          <img src="{{ site.logoMark | url }}" alt="{{ title }}">
+        </a>
 
-      <a role="button" class="navbar-burger" data-target="navbar-menu" aria-label="menu" aria-expanded="false">
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
-      </a>
-    </div>
+        <button id="hamburgerMenu" class="navbar-burger" data-target="navbar-menu" aria-label="menu" aria-expanded="false" type="button">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </button>
+      </div>
 
-    <div class="navbar-menu" id="navbar-menu">
-      {% for link in menu %}
-        {% assign pagedir = page.url %}
-        {% if link.subpages %}
-          {% capture subpage-is-active %}
-            {% for sublink in link.subpages %}
-              {% if sublink.url == pagedir %}
-                is-active
-              {% endif %}
-            {% endfor %}
-          {% endcapture %}
-          <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link{% if link.url == pagedir %} is-active {% endif %}{{ subpage-is-active }}" href="{{ link.url | url }}"{% if link.url contains 'http://' or link.url contains 'https://' %} target="_blank"{% endif %}>
-              {{ link.title }}
-            </a>
-            <div class="navbar-dropdown">
+      <div class="navbar-menu" id="navbar-menu">
+        {% for link in menu %}
+          {% assign pagedir = page.url %}
+          {% if link.subpages %}
+            {% capture subpage-is-active %}
               {% for sublink in link.subpages %}
-                <a class="navbar-item{% if sublink.url == pagedir %} is-active{% endif %}" href="{{ sublink.url | url }}"{% if sublink.url contains 'http://' or sublink.url contains 'https://' %} target="_blank"{% endif %}>
-                  {{ sublink.title }}
-                </a>
+                {% if sublink.url == pagedir %}
+                  is-active
+                {% endif %}
               {% endfor %}
+            {% endcapture %}
+            <div class="navbar-item has-dropdown is-hoverable">
+              <a class="navbar-link{% if link.url == pagedir %} is-active {% endif %}{{ subpage-is-active }}" href="{{ link.url | url }}"{% if link.url contains 'http://' or link.url contains 'https://' %} target="_blank"{% endif %}>
+                {{ link.title }}
+              </a>
+              <div class="navbar-dropdown">
+                {% for sublink in link.subpages %}
+                  <a class="navbar-item{% if sublink.url == pagedir %} is-active{% endif %}" href="{{ sublink.url | url }}"{% if sublink.url contains 'http://' or sublink.url contains 'https://' %} target="_blank"{% endif %}>
+                    {{ sublink.title }}
+                  </a>
+                {% endfor %}
+              </div>
             </div>
-          </div>
-        {% else %}
-          <a class="navbar-item{% if link.url == pagedir %} is-active{% endif %}" href="{{ link.url | url }}"{% if link.url contains 'http://' or link.url contains 'https://' %} target="_blank"{% endif %}>
-            {{ link.title }}
-          </a>
-        {% endif %}
-      {% endfor %}
-      {% include "social-buttons.html" %}
+          {% else %}
+            <a class="navbar-item{% if link.url == pagedir %} is-active{% endif %}" href="{{ link.url | url }}"{% if link.url contains 'http://' or link.url contains 'https://' %} target="_blank"{% endif %}>
+              {{ link.title }}
+            </a>
+          {% endif %}
+        {% endfor %}
+        {% include "social-buttons.html" %}
+      </div>
     </div>
   </div>
 </nav>
+
+<script>
+  const hamburger = document.getElementById('hamburgerMenu');
+  const menu = document.getElementById('navbar-menu');
+
+  const toggleMenu = () => {
+    const isExpanded = hamburger.getAttribute('aria-expanded') === 'true';
+    hamburger.setAttribute('aria-expanded', !isExpanded);
+    menu.classList.toggle('is-active', isExpanded);
+  };
+
+  // Toggle on click
+  hamburger.addEventListener('click', toggleMenu);
+
+
+</script>