Skip to content

Commit 194d48e

Browse files
ststimacmrego
ststimac
and
mrego
authored
Servo.org Redesign (#202)
 Co-authored-by: Stephanie Stimac <[email protected]> Co-authored-by: Manuel Rego Casasnovas <[email protected]> Signed-off-by: Manuel Rego <[email protected]>
1 parent 1a29e25 commit 194d48e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+6020
-1022
lines changed

‎.eleventy.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@ const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
44
const pluginRss = require("@11ty/eleventy-plugin-rss");
55

66
module.exports = function(eleventyConfig) {
7-
eleventyConfig.setTemplateFormats(["md", "njk", "html", "css", "pdf"]);
7+
eleventyConfig.setTemplateFormats(["md", "njk", "html", "css", "pdf", "liquid"]);
88

99
eleventyConfig.addPassthroughCopy("CNAME");
1010
eleventyConfig.addPassthroughCopy({"assets/img": "img"});
1111
eleventyConfig.addPassthroughCopy({"assets/svg": "svg"});
1212
eleventyConfig.addPassthroughCopy({"node_modules/reveal.js/dist": "reveal.js/dist"});
1313
eleventyConfig.addPassthroughCopy({"node_modules/reveal.js/plugin": "reveal.js/plugin"});
14+
eleventyConfig.addPassthroughCopy({"assets/reveal.js-theme": "reveal.js/dist/theme"});
1415
eleventyConfig.addPassthroughCopy({"slides": "slides"});
1516

1617
eleventyConfig.addShortcode("currentYear", () => `${new Date().getFullYear()}`);

‎.github/workflows/deploy.yml

-4
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,6 @@ jobs:
2525
npm-
2626
- name: Install Node modules
2727
run: npm install
28-
- name: Sass
29-
run: npm run sass
30-
- name: Sass Reveal.js
31-
run: npm run sass-revealjs
3228
- name: Eleventy
3329
run: |
3430
npx eleventy --output='_site/' --pathprefix='/'

‎.github/workflows/pr.yml

-4
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,6 @@ jobs:
3030
npm-
3131
- name: Install Node modules
3232
run: npm install
33-
- name: Sass
34-
run: npm run sass
35-
- name: Sass Reveal.js
36-
run: npm run sass-revealjs
3733
- name: Eleventy
3834
run: |
3935
npx eleventy \

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,6 @@ _site/
33

44
# npm assets
55
node_modules/
6+
7+
# macOS
8+
.DS_Store

‎_data/site.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
2-
"tagline": "Servo, the embeddable, independent, memory-safe, modular, parallel web rendering engine",
2+
"tagline": "Servo aims to empower developers with a lightweight, high-performance alternative for embedding web technologies in applications.",
33
"author": "The Servo Project Developers",
44
"favicon": "/img/servo-symbol-color-no-container.png",
55
"logo": "/img/servo-color-positive.png",
6-
"logoNegative": "/img/servo-color-negative-no-container.png",
6+
"logoPositive": "/img/servo-color-positive-no-container.png",
7+
"logoMark": "/img/servo-color.png",
78
"logoLFEurope": "/img/lf-europe-logo.png"
89
}

‎_data/social.json

-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,5 @@
22
{ "title": "GitHub", "color": "github-color", "url": "https://github.com/servo/servo", "icon": "fab fa-github" },
33
{ "title": "Mastodon", "color": "mastodon-color", "url": "https://floss.social/@servo", "icon": "fab fa-mastodon" },
44
{ "title": "Bluesky", "color": "bluesky-color", "url": "https://bsky.app/profile/servo.org", "icon": "fab fa-bluesky" },
5-
{ "title": "Twitter", "color": "twitter-color", "url": "https://twitter.com/ServoDev", "icon": "fab fa-twitter" },
65
{ "title": "LinkedIn", "color": "linkedin-color", "url": "https://www.linkedin.com/company/servo-project/", "icon": "fab fa-linkedin" }
76
]

‎_includes/contact.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div class="contact" aria-label="Contact information">
2+
<div class="container">
3+
<div class="inner-container two-column">
4+
<div class="column">
5+
<h2>Contact</h2>
6+
</div>
7+
<div class="column">
8+
<ul>
9+
<li><a class="footer-link" href="https://servo.zulipchat.com/">Zulip chat</a></li>
10+
<li><a class="footer-link" href="https://github.com/servo/servo/discussions">GitHub discussions</a></li>
11+
<li><a class="footer-link" href="mailto:[email protected]">Email: [email protected]</a></li>
12+
<li><a class="footer-link" href="https://floss.social/@servo">Mastodon</a></li>
13+
<li><a class="footer-link" href="https://bsky.app/profile/servo.org">Bluesky</a></li>
14+
</ul>
15+
</div>
16+
</div>
17+
</div>
18+
</div>

‎_includes/default.html

+5-9
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,7 @@
44
<body class="is-page">
55
<main class="is-main">
66
{% include "header.html" %}
7-
<section class="section" style="padding-top: 0;">
8-
<div class="container">
97
<aside class="menu box">
10-
<p class="menu-label">
11-
{{ title }}
12-
</p>
138
{% for link in menu %}
149
{% assign pagedir = page.url %}
1510
{% if link.url == pagedir %}
@@ -23,12 +18,13 @@
2318
{% endif %}
2419
{% endfor %}
2520
</aside>
26-
<div class="content">
21+
<div class="content container" id="{{ title }}">
2722
{{ content }}
2823
</div>
29-
</div>
30-
</section>
3124
</main>
32-
{% include "footer.html" %}
25+
{% include "contact.html" %}
26+
<footer>
27+
{% include "footer.html" %}
28+
</footer>
3329
</body>
3430
</html>

‎_includes/download.html

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
---
22
layout: default
33
---
4+
<div class="subpage-content inner-container">
5+
<h1 id="download">
6+
Download
7+
<a class="headline-hash" href="#download">
8+
<span class="icon hashlink">
9+
<i class="fas fa-link"></i>
10+
</span>
11+
</a>
12+
</h1>
413

5-
<h1 id="download">
6-
Download
7-
<a class="headline-hash" href="#download">
8-
<span class="icon hashlink">
9-
<i class="fas fa-link"></i>
10-
</span>
11-
</a>
12-
</h1>
14+
{% include "downloads.html" %}
1315

14-
{% include "downloads.html" %}
15-
16-
{{ content }}
16+
{{ content }}
17+
</div>

‎_includes/downloads-list.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
<div class="downloads">
22
{% for download in downloads %}
3-
<p>
4-
<div class="buttons has-addons">
5-
<a rel="nofollow" role="button" class="button is-primary" href="https://download.servo.org/{{download.href}}" style="width: 22ch;">{{download.name}}</a>
3+
<div class="buttons">
4+
<a rel="nofollow" role="button" class="button" href="https://download.servo.org/{{download.href}}" style="width: 22ch;">{{download.name}}</a>
65
<span class="button is-static" id="date-{{download.key}}" style="width: 10ch;">?</span>
76
<a rel="nofollow" role="button" class="button" style="width: 7ch;" href="https://download.servo.org/{{download.sha256}}">sha256</a>
87
</div>
9-
</p>
108
{% endfor %}
119
</div>

‎_includes/downloads.html

+14-15
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1-
<div class="container">
2-
<div class="content">
3-
<div class="columns">
4-
<div class="column">
5-
<p>
6-
These pre-built nightly snapshots allow developers to try Servo and
7-
<a href="https://github.com/servo/servo/issues/new">report issues</a> without
8-
<a href="https://book.servo.org/hacking/building-servo.html">building Servo locally</a>.
9-
<strong>Please don’t log into your bank with Servo just yet!</strong>
10-
</p>
11-
</div>
12-
<div class="column">
13-
{% include "downloads-list.html" %}
14-
{% include "downloads-script.html" %}
15-
</div>
1+
<div class="content">
2+
<div class="columns">
3+
<div class="column">
4+
<p>
5+
These pre-built nightly snapshots allow developers to try Servo and
6+
<a href="https://github.com/servo/servo/issues/new">report issues</a> without
7+
<a href="https://book.servo.org/hacking/building-servo.html">building Servo locally</a>.
8+
<strong>Please don’t log into your bank with Servo just yet!</strong>
9+
</p>
10+
</div>
11+
<div class="column">
12+
{% include "downloads-list.html" %}
13+
{% include "downloads-script.html" %}
1614
</div>
1715
</div>
1816
</div>
17+

‎_includes/footer.html

+14-17
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
1-
<footer class="footer">
2-
<div class="container" style="text-align: center;">
3-
<a href="{{ '/coc/' | url }}">Code of Conduct</a> |
4-
Contact: <a href="mailto:[email protected]">[email protected]</a>,
5-
<a href="https://servo.zulipchat.com/">Zulip Chat</a>,
6-
<a href="https://github.com/servo/servo/discussions">GitHub Discussions</a>,
7-
<a href="https://floss.social/@servo">Mastodon</a>,
8-
<a href="https://bsky.app/profile/servo.org">Bluesky</a>,
9-
<a href="https://twitter.com/ServoDev">Twitter</a>,
10-
<a href="https://www.linkedin.com/company/servo-project/">LinkedIn</a>
1+
<div class="footer">
2+
<div class="container">
3+
<div class="two-column inner-container">
4+
<div class="column">
5+
<div class="logo"><a href="https://linuxfoundation.eu"><img src="{{ site.logoLFEurope | url }}" alt="Linux Foundation Europe logo" width="250"></a></div>
6+
<p>&copy; {% currentYear %} {{ site.author }}</p>
7+
<p>Copyright &copy; Servo is a project of <a class="footer-link" href="https://linuxfoundation.eu/">Linux Foundation Europe</a>.</p>
8+
<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>
9+
</div>
10+
<div class="column code-of-conduct">
11+
<a class="footer-link" href="{{ '/coc/' | url }}">Code of Conduct</a>
12+
</div>
1113
</div>
12-
<div class="container" style="text-align: center; font-size: 0.875em;">
13-
<p><a href="https://linuxfoundation.eu"><img src="{{ site.logoLFEurope | url }}" alt="Linux Foundation Europe logo" width="250" style="margin: 1em;"></a></p>
14-
<p>&copy; {% currentYear %} {{ site.author }}</p>
15-
<p>Copyright &copy; Servo is a project of <a href="https://linuxfoundation.eu/">Linux Foundation Europe</a>.</p>
16-
<p>For website terms of use, trademark policy and other project policies please see <a href="https://lfprojects.org">https://lfprojects.org</a>.</p>
17-
</div>
18-
</footer>
14+
</div>
15+
1916
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
2017
<script>
2118
$(() => {

‎_includes/header.html

+55-37
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,65 @@
11
<nav class="navbar" role="navigation" aria-label="main navigation">
22
<div class="container">
3-
<div class="navbar-brand">
4-
<a class="navbar-item" href="{{ '/' | url }}">
5-
<img src="{{ site.logoNegative | url }}" alt="{{ title }}">
6-
</a>
3+
<div class="inner-container">
4+
<div class="navbar-brand">
5+
<a href="{{ '/' | url }}">
6+
<img src="{{ site.logoMark | url }}" alt="{{ title }}">
7+
</a>
78

8-
<a role="button" class="navbar-burger" data-target="navbar-menu" aria-label="menu" aria-expanded="false">
9-
<span aria-hidden="true"></span>
10-
<span aria-hidden="true"></span>
11-
<span aria-hidden="true"></span>
12-
</a>
13-
</div>
9+
<button id="hamburgerMenu" class="navbar-burger" data-target="navbar-menu" aria-label="menu" aria-expanded="false" type="button">
10+
<span aria-hidden="true"></span>
11+
<span aria-hidden="true"></span>
12+
<span aria-hidden="true"></span>
13+
</button>
14+
</div>
1415

15-
<div class="navbar-menu" id="navbar-menu">
16-
{% for link in menu %}
17-
{% assign pagedir = page.url %}
18-
{% if link.subpages %}
19-
{% capture subpage-is-active %}
20-
{% for sublink in link.subpages %}
21-
{% if sublink.url == pagedir %}
22-
is-active
23-
{% endif %}
24-
{% endfor %}
25-
{% endcapture %}
26-
<div class="navbar-item has-dropdown is-hoverable">
27-
<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 %}>
28-
{{ link.title }}
29-
</a>
30-
<div class="navbar-dropdown">
16+
<div class="navbar-menu" id="navbar-menu">
17+
{% for link in menu %}
18+
{% assign pagedir = page.url %}
19+
{% if link.subpages %}
20+
{% capture subpage-is-active %}
3121
{% for sublink in link.subpages %}
32-
<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 %}>
33-
{{ sublink.title }}
34-
</a>
22+
{% if sublink.url == pagedir %}
23+
is-active
24+
{% endif %}
3525
{% endfor %}
26+
{% endcapture %}
27+
<div class="navbar-item has-dropdown is-hoverable">
28+
<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 %}>
29+
{{ link.title }}
30+
</a>
31+
<div class="navbar-dropdown">
32+
{% for sublink in link.subpages %}
33+
<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 %}>
34+
{{ sublink.title }}
35+
</a>
36+
{% endfor %}
37+
</div>
3638
</div>
37-
</div>
38-
{% else %}
39-
<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 %}>
40-
{{ link.title }}
41-
</a>
42-
{% endif %}
43-
{% endfor %}
44-
{% include "social-buttons.html" %}
39+
{% else %}
40+
<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 %}>
41+
{{ link.title }}
42+
</a>
43+
{% endif %}
44+
{% endfor %}
45+
{% include "social-buttons.html" %}
46+
</div>
4547
</div>
4648
</div>
4749
</nav>
50+
51+
<script>
52+
const hamburger = document.getElementById('hamburgerMenu');
53+
const menu = document.getElementById('navbar-menu');
54+
55+
const toggleMenu = () => {
56+
const isExpanded = hamburger.getAttribute('aria-expanded') === 'true';
57+
hamburger.setAttribute('aria-expanded', !isExpanded);
58+
menu.classList.toggle('is-active', isExpanded);
59+
};
60+
61+
// Toggle on click
62+
hamburger.addEventListener('click', toggleMenu);
63+
64+
65+
</script>

0 commit comments

Comments
 (0)