diff --git a/content/collaborations/interest-groups.md b/content/collaborations/interest-groups.md
index f0952b048d3a6479a69148d68a97b2b7091949e7..af79a369f73cf31441300442a740ad273cb26726 100644
--- a/content/collaborations/interest-groups.md
+++ b/content/collaborations/interest-groups.md
@@ -85,5 +85,4 @@ There is no direct correlation between Interest Groups and Working Groups, and t
While similar, they are different. Special Interest Groups are a collaborative governance structure that allows Members of a working group to collaborate on specific, focused aspects of the broader working group’s scope. As such, Members of a SIG must also be participants of the Working Group which has formed the SIG.
## 15. How do I find out more about Interest Groups and Working Groups?
-Please contact us via [collaborations@eclipse-foundation.org](mailto:collaborations@eclipse-foundation.org
-).
+Please contact us via [collaborations@eclipse-foundation.org](mailto:collaborations@eclipse-foundation.org).
diff --git a/content/collaborations/working-groups/brief/images/founding-members/accenture.png b/content/collaborations/working-groups/brief/images/founding-members/accenture.png
new file mode 100644
index 0000000000000000000000000000000000000000..09163a9c71c582450389ecac53e8e5d33c49ec9b
Binary files /dev/null and b/content/collaborations/working-groups/brief/images/founding-members/accenture.png differ
diff --git a/content/collaborations/working-groups/brief/images/founding-members/arm.png b/content/collaborations/working-groups/brief/images/founding-members/arm.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b541cb308d1ea0d2b98bd1fca5efc80e8eff586
Binary files /dev/null and b/content/collaborations/working-groups/brief/images/founding-members/arm.png differ
diff --git a/content/collaborations/working-groups/brief/images/founding-members/avl.png b/content/collaborations/working-groups/brief/images/founding-members/avl.png
new file mode 100644
index 0000000000000000000000000000000000000000..30466b293c57b9ca70c3ff5f5a5c073274490637
Binary files /dev/null and b/content/collaborations/working-groups/brief/images/founding-members/avl.png differ
diff --git a/content/collaborations/working-groups/brief/images/founding-members/bosch.png b/content/collaborations/working-groups/brief/images/founding-members/bosch.png
new file mode 100644
index 0000000000000000000000000000000000000000..31f94d6183b6e76618807b26d1bf8202f28d873c
Binary files /dev/null and b/content/collaborations/working-groups/brief/images/founding-members/bosch.png differ
diff --git a/content/collaborations/working-groups/brief/images/founding-members/capgemini.png b/content/collaborations/working-groups/brief/images/founding-members/capgemini.png
new file mode 100644
index 0000000000000000000000000000000000000000..c879e5ded84bf1b055d59d95da54ff433caa3566
Binary files /dev/null and b/content/collaborations/working-groups/brief/images/founding-members/capgemini.png differ
diff --git a/content/collaborations/working-groups/brief/images/founding-members/continental.png b/content/collaborations/working-groups/brief/images/founding-members/continental.png
new file mode 100644
index 0000000000000000000000000000000000000000..79cabc47a138bb156e3bdd6a25ead6ca84b654bd
Binary files /dev/null and b/content/collaborations/working-groups/brief/images/founding-members/continental.png differ
diff --git a/content/collaborations/working-groups/brief/images/founding-members/dmi.png b/content/collaborations/working-groups/brief/images/founding-members/dmi.png
new file mode 100644
index 0000000000000000000000000000000000000000..05937350617a2b865b6e71f019dd41aa6acc81ee
Binary files /dev/null and b/content/collaborations/working-groups/brief/images/founding-members/dmi.png differ
diff --git a/content/collaborations/working-groups/brief/images/founding-members/etas.png b/content/collaborations/working-groups/brief/images/founding-members/etas.png
new file mode 100644
index 0000000000000000000000000000000000000000..19d5a0f50894678fa851dc17876bae8a069da87a
Binary files /dev/null and b/content/collaborations/working-groups/brief/images/founding-members/etas.png differ
diff --git a/content/collaborations/working-groups/brief/images/founding-members/microsoft.png b/content/collaborations/working-groups/brief/images/founding-members/microsoft.png
new file mode 100644
index 0000000000000000000000000000000000000000..405a68469fa8f0e7e3813d899e273d30d987d19b
Binary files /dev/null and b/content/collaborations/working-groups/brief/images/founding-members/microsoft.png differ
diff --git a/content/collaborations/working-groups/brief/images/founding-members/red-hat.png b/content/collaborations/working-groups/brief/images/founding-members/red-hat.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa95a88711d8c3d98e1320623315120ebe6ce6f3
Binary files /dev/null and b/content/collaborations/working-groups/brief/images/founding-members/red-hat.png differ
diff --git a/content/collaborations/working-groups/brief/images/founding-members/reycom.png b/content/collaborations/working-groups/brief/images/founding-members/reycom.png
new file mode 100644
index 0000000000000000000000000000000000000000..414d8507716569cf4ed80fae570961f3460300d6
Binary files /dev/null and b/content/collaborations/working-groups/brief/images/founding-members/reycom.png differ
diff --git a/content/collaborations/working-groups/brief/images/founding-members/suse.png b/content/collaborations/working-groups/brief/images/founding-members/suse.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ca525b90c544e05cd9a7c7d63a11d7b657c3bac
Binary files /dev/null and b/content/collaborations/working-groups/brief/images/founding-members/suse.png differ
diff --git a/content/collaborations/working-groups/brief/images/founding-members/zf.png b/content/collaborations/working-groups/brief/images/founding-members/zf.png
new file mode 100644
index 0000000000000000000000000000000000000000..1121d4439cbfe3ae85be532deb6c7e2fcb325ad7
Binary files /dev/null and b/content/collaborations/working-groups/brief/images/founding-members/zf.png differ
diff --git a/content/collaborations/working-groups/brief/images/icons/quote-icon.png b/content/collaborations/working-groups/brief/images/icons/quote-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a866f6166caa7af68a900bfd389b2fe0b5028be
Binary files /dev/null and b/content/collaborations/working-groups/brief/images/icons/quote-icon.png differ
diff --git a/content/collaborations/working-groups/brief/index.md b/content/collaborations/working-groups/brief/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..2f9ec2c0eeac6af01033268920c186988cdb98e9
--- /dev/null
+++ b/content/collaborations/working-groups/brief/index.md
@@ -0,0 +1,65 @@
+---
+title: Brief
+date: 2022-10-04T15:22:11-04:00
+description: Reasons to collaborate on open source software at Eclipse Foundation
+categories: []
+keywords: ['collaborate', 'open source', 'working groups', 'interest groups', 'fees']
+slug: ""
+aliases: []
+hide_page_title: true
+hide_breadcrumb: true
+hide_sidebar: true
+page_css_file: public/css/collaborations-styles.css
+container: container-fluid collaborations-brief-container padding-bottom-60
+layout: single
+resources:
+ - src: sections/*.md
+---
+
+{{< pages/collaborations/working-groups/brief/table_of_contents >}}
+
+{{< grid/section-container class="row featured-section featured-section-dark featured-section-brief margin-bottom-30" isMarkdown="true" >}}
+
+# 5 Reasons to Collaborate on Open Source Software at Eclipse Foundation { .padding-bottom-20 }
+
+## Why a Working Group at Eclipse Foundation is a Great Alternative to an Association { .padding-bottom-20 }
+
+Today, organizations of all types and sizes across Europe recognize that open collaboration is a strategic imperative for business success.
+
+For many European organizations, the natural first step towards open collaboration is to create a new association or foundation that’s dedicated to their particular technology or industry focus area. Unfortunately, these siloed associations almost inevitably experience challenges that severely restrict, slow, and complicate open innovation among members.
+
+The good news is there’s an alternative approach that offers considerable advantages: Creating a collaborative, open ecosystem — called a working group — at the Eclipse Foundation.
+
+### Eclipse Foundation Members Have Easy Access to a “Foundation in a Box" { .h4 }
+
+The Eclipse Foundation AISBL is the largest open source foundation in Europe in terms of projects, developers, and members. During its nearly 20 years of operation, the Eclipse Foundation has successfully created and nurtured hundreds of open source and open specification projects and communities. It has also provided a home for dozens of vendor neutral, open working group ecosystems for more than a decade.
+
+Working groups at the Eclipse Foundation receive [services and benefits](/membership/) that allow them to openly collaborate and innovate in a much faster, easier, and more cost-effective way than they can in a standalone association or foundation. As a result, they have a much greater chance of success.
+
+{{</ grid/section-container >}}
+
+{{< grid/section-container isMarkdown="false" >}}
+ {{< grid/div isMarkdown="true" >}}
+## Here's a closer look at why a working group is a great alternative to a traditional association
+ {{</ grid/div >}}
+ {{< pages/collaborations/working-groups/brief/sections >}}
+{{</ grid/section-container >}}
+
+{{< grid/section-container class="margin-top-40" isMarkdown="true" >}}
+## Jumpstart Open Source Innovation at the Eclipse Foundation { .h4 .margin-bottom-30 }
+
+When you create a new association, your open source ecosystem is starting from nothing. However, when you create a new working group at the Eclipse Foundation, your open source ecosystem begins with a strong foundation of governance, processes, and infrastructure it can immediately leverage.
+
+
+Since 2019, the number of working groups hosted at the Eclipse Foundation has nearly tripled. More than 190 Eclipse Foundation members are also members of working group ecosystems, and a growing number participate in multiple working groups.
+
+
+### Affordable Fees Open the Door to All { .h5 }
+The fees for Eclipse Foundation membership, and for working group membership, are based on annual corporate revenues, so it’s affordable for organizations of all sizes to join working groups. And each working group has the flexibility to tailor its charter to define the right set of membership levels, fees, and committees to support its goals.
+
+
+### Learn More { .h5 }
+To learn more about the benefits of setting up a working group at the Eclipse Foundation, [visit our website](https://www.eclipse.org/org/workinggroups/about.php) or [contact us today](mailto:collaborations@eclipse-foundation.org).
+
+
+{{</ grid/div >}}
\ No newline at end of file
diff --git a/content/collaborations/working-groups/brief/sections/accelerates-time-to-market.md b/content/collaborations/working-groups/brief/sections/accelerates-time-to-market.md
new file mode 100644
index 0000000000000000000000000000000000000000..323757cc3316dd8209bc6a05c3d267c0f4d93916
--- /dev/null
+++ b/content/collaborations/working-groups/brief/sections/accelerates-time-to-market.md
@@ -0,0 +1,11 @@
+---
+title: Faster, Easier Setup Accelerates Time to Market
+section_id: accelerate-time-to-market
+weight: 2
+---
+
+It can easily take several years to reinvent all of the governance and processes the Eclipse Foundation has already developed. One of the major European associations that came to the Eclipse Foundation for assistance had been working on its IP policy and bylaws for 18 months with very few tangible results.
+
+In contrast, the Eclipse Software Defined Vehicle Working Group was able to take advantage of the existing Eclipse Foundation framework and processes. As a result, ecosystem members began openly collaborating just three months after initially joining forces. This is an amazing achievement, given the potential complexity that can arise among such a broad range of large, world-class organizations. Founding members include:
+
+{{< pages/collaborations/working-groups/brief/logo_grid >}}
\ No newline at end of file
diff --git a/content/collaborations/working-groups/brief/sections/collaboration-has-no-boundaries.md b/content/collaborations/working-groups/brief/sections/collaboration-has-no-boundaries.md
new file mode 100644
index 0000000000000000000000000000000000000000..6e9288261a76605b433f55ee12d50ec3a33c2765
--- /dev/null
+++ b/content/collaborations/working-groups/brief/sections/collaboration-has-no-boundaries.md
@@ -0,0 +1,29 @@
+---
+title: Collaboration Has No Boundaries
+section_id: collaboration-has-no-boundaries
+weight: 5
+quote: |
+ We're able to partner with Thales on projects for the long term. We're also able to build on our experiences
+ and involvement in the Eclipse Foundation to act as a middleman who can help and advise Thales
+ about opportunities to enhance their solutions.
+quote_author: |
+ Cédric Brun,
+
+ CEO, Obeo
+---
+
+In a standalone open source association, collaboration opportunities are typically limited to the members of the association.
+
+At the Eclipse Foundation, there are endless opportunities for ecosystem members and entire ecosystems to openly collaborate on
+shared goals across technologies and industry focus areas. There’s no need to negotiate individual agreements or manage multiple
+highly diverse sets of requirements and rules.
+
+At the ecosystem level, a number of working groups are collaborating to strengthen their individual efforts, including:
+
+- [Jakarta EE](https://jakarta.ee/) and [MicroProfile](https://microprofile.io/) Working Groups
+- [Eclipse IoT](https://iot.eclipse.org/) and [Eclipse Edge Native](https://edgenative.eclipse.org/) Working Groups
+
+Within these very diverse ecosystems, members ranging from major multinational players to small, entrepreneurial organizations have
+discovered the potential to combine their respective technologies. For example, Obeo, a Strategic Member of the Eclipse Foundation
+with a few dozen employees, is partnering with Thales, a multinational corporation with tens of thousands of employees. Both companies
+contribute to numerous Eclipse Foundation projects.
diff --git a/content/collaborations/working-groups/brief/sections/established-brand-and-infrastructure.md b/content/collaborations/working-groups/brief/sections/established-brand-and-infrastructure.md
new file mode 100644
index 0000000000000000000000000000000000000000..88a528cf10bbdb5af630a7f92e672c291f6bbc9c
--- /dev/null
+++ b/content/collaborations/working-groups/brief/sections/established-brand-and-infrastructure.md
@@ -0,0 +1,27 @@
+---
+title: An Established Brand and Infrastructure Increase Ecosystem Health, Visibility
+section_id: established-brand-and-infrastructure
+weight: 4
+---
+
+The growing number of siloed, special-purpose, and single-topic open source associations and foundations fractures and weakens the global open source ecosystem.
+
+With so much noise in the open source universe, it’s difficult for associations, particularly smaller ones, to create the visibility needed for sustainable
+operations. Staffing and financial shortfalls, and lack of experience nurturing open source communities, compound the challenges. And every association is
+chasing a finite member pool.
+
+The Eclipse Foundation brand is globally recognized and proven to boost credibility for ecosystems and their members. With consistent governance, licensing, and life
+cycle models across all communities and projects, it’s easy and cost-effective for organizations to participate in all initiatives that interest them.
+
+To support and nurture the working groups it hosts, the Eclipse Foundation provides the services many ecosystems are unable to deliver on their own, including:
+
+- IP and trademark management and licensing
+- Ecosystem development and marketing
+- Collaborative management
+- Specification development
+- Branding and compatibility
+- Marketing and promotion
+- IT infrastructure
+
+With no need to worry about staffing and delivering these critical services, ecosystems are free to focus on technology and innovation objectives while continuing to
+grow and diversify.
diff --git a/content/collaborations/working-groups/brief/sections/reduce-risks.md b/content/collaborations/working-groups/brief/sections/reduce-risks.md
new file mode 100644
index 0000000000000000000000000000000000000000..42d577230c66cbec854bf82e5e1eff5c83e94225
--- /dev/null
+++ b/content/collaborations/working-groups/brief/sections/reduce-risks.md
@@ -0,0 +1,24 @@
+---
+title: A Proven Governance and Legal Framework Reduces Risks
+section_id: reduce-risks
+weight: 1
+quote: |
+ We have been working hard with Linaro, Seco, Array, NOITechPark, and Synesthesia to prepare Oniro’s initial code contribution and public cloud CI/CD infrastructure, and it is so exciting to see everything moving under the expert governance of the Eclipse Foundation.
+quote_author: |
+ Davide Ricci,
+
+ Director of Consumer Business Group European Open Source Technology Center, Huawei
+---
+
+Associations that attempt to develop their own governance and legal framework for open collaboration likely don’t have the intellectual property (IP) and patent licensing expertise needed to get it right.
+
+Unfortunately, many associations adopt old-style IP and licensing models that break the open source collaboration model because developers can’t simply take a piece of source code and freely experiment with it. This restriction limits widescale adoption of the open source software, slows technology advancement, and makes the results of the association’s efforts far less relevant.
+
+Multiple European associations that leverage open source software have approached the Eclipse Foundation for assistance with their governance model. They know the Eclipse Foundation already has an established governance and legal framework for open source collaboration, community building, and innovation. Plus, they see the value in adopting a framework that was built with community support and feedback, and that has been accepted and successfully implemented for years.
+
+Because all Eclipse Foundation members have already agreed to follow the Foundation’s governance framework, there’s no need to work through the many different, and potentially conflicting, interests that can arise when a new association is created.
+
+New open source ecosystems that recognize these benefits, and want to keep governance and legal risks as low as possible, are also choosing to host their efforts at the Eclipse Foundation, including:
+
+- [The Oniro Working Group](https://oniroproject.org/)
+- [The Eclipse Software Defined Vehicle Working Group](https://sdv.eclipse.org/)
\ No newline at end of file
diff --git a/content/collaborations/working-groups/brief/sections/vendor-neutrality.md b/content/collaborations/working-groups/brief/sections/vendor-neutrality.md
new file mode 100644
index 0000000000000000000000000000000000000000..ba8febfaf61a5e24d605c9a7fca9469093e64fa7
--- /dev/null
+++ b/content/collaborations/working-groups/brief/sections/vendor-neutrality.md
@@ -0,0 +1,31 @@
+---
+title: True Vendor Neutrality Levels the Playing Field
+section_id: vendor-neutrality
+weight: 3
+quote: |
+ We were very surprised and pleased to learn we would be on equal terms with the big vendors, which with the same voice and the same vote as they have on the projects we participate in.
+quote_author: |
+ Steve Millidge,
+
+ Payara Services, a member of the Jakarta EE Working Group
+---
+
+One of the main reasons organizations have historically chosen to form a new open source association is to
+maintain control over the way the ecosystem operates, rather than adopt a governance model they can’t change. Unfortunately, the control these organizations seek ends up stifling open collaboration and innovation
+opportunities:
+
+- Small and medium-sized organizations don’t have the financial or legal resources to adequately review
+ the governance of multiple, uniquely operated open source associations. This tilts governance in favor
+ of larger organizations.
+
+- When larger organizations dominate, the ecosystem can’t fully benefit from the innovation and cutting-edge
+ skill sets that smaller, more nimble, and entrepreneurial organizations often bring to the table.
+
+Working groups hosted at the Eclipse Foundation follow a charter that clearly defines the collaborative
+boundaries for ecosystem members. Every ecosystem member has an equal voice and an equal vote, no matter
+the size of their organization, their membership fees, or how many of their staff participate in the
+ecosystem.
+
+This level playing field opens the door for organizations of all sizes, and at all stages of development,
+to openly innovate and collaborate. Inevitably, the ecosystem output is more advanced and innovative, and
+is relevant to a much wider range of organizations to drive broader technology adoption.
diff --git a/data/collaborations/founding_members.yml b/data/collaborations/founding_members.yml
new file mode 100644
index 0000000000000000000000000000000000000000..71ea226fb57c589ab3e23184ccd027a1a38fa9cc
--- /dev/null
+++ b/data/collaborations/founding_members.yml
@@ -0,0 +1,39 @@
+- organization: Accenture
+ logo: /collaborations/working-groups/brief/images/founding-members/accenture.png
+ website: https://www.accenture.com/ca-en
+- organization: Arm
+ logo: /collaborations/working-groups/brief/images/founding-members/arm.png
+ website: https://www.arm.com/
+- organization: AVL
+ logo: /collaborations/working-groups/brief/images/founding-members/avl.png
+ website: https://www.avl.com/
+- organization: Bosch
+ logo: /collaborations/working-groups/brief/images/founding-members/bosch.png
+ website: https://www.bosch.com/
+- organization: Capgemini
+ logo: /collaborations/working-groups/brief/images/founding-members/capgemini.png
+ website: https://www.capgemini.com/
+- organization: Continental
+ logo: /collaborations/working-groups/brief/images/founding-members/continental.png
+ website: https://www.continental.com/
+- organization: DMI
+ logo: /collaborations/working-groups/brief/images/founding-members/dmi.png
+ website: https://dminc.com/
+- organization: ETAS
+ logo: /collaborations/working-groups/brief/images/founding-members/etas.png
+ website: https://www.etas.com/
+- organization: Microsoft
+ logo: /collaborations/working-groups/brief/images/founding-members/microsoft.png
+ website: https://www.microsoft.com/en-ca/
+- organization: Red Hat
+ logo: /collaborations/working-groups/brief/images/founding-members/red-hat.png
+ website: https://www.redhat.com/
+- organization: Reycom
+ logo: /collaborations/working-groups/brief/images/founding-members/reycom.png
+ website: http://www.reycom.eu/
+- organization: SUSE
+ logo: /collaborations/working-groups/brief/images/founding-members/suse.png
+ website: https://www.suse.com/
+- organization: ZF Group
+ logo: /collaborations/working-groups/brief/images/founding-members/zf.png
+ website: https://www.zf.com/
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index d66980114066d28035717504c32d0a581d7b5612..783eeeb0a89ee5a990db00138ff29cfcc8362598 100644
--- a/js/main.js
+++ b/js/main.js
@@ -16,3 +16,4 @@ import './src/eclipsefdn-promo-content'
import './src/featured-projects-committer'
import './src/collaborations/eclipsefdn.weighted-working-groups';
import './src/research/projects-section';
+import './src/collaborations/eclipsefdn.rollover-link';
diff --git a/js/src/collaborations/eclipsefdn.rollover-link.js b/js/src/collaborations/eclipsefdn.rollover-link.js
new file mode 100644
index 0000000000000000000000000000000000000000..929c7ea143b50be8b15665122aab8af0b4c63be6
--- /dev/null
+++ b/js/src/collaborations/eclipsefdn.rollover-link.js
@@ -0,0 +1,99 @@
+/*!
+ * Copyright (c) 2022 Eclipse Foundation, Inc.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * Contributors:
+ * Olivier Goulet <olivier.goulet@eclipse-foundation.org>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+let activeMenuItemHashId = null; // The selected menu item's #id
+
+/**
+ * Toggles the visibility of the mobile rollover / toc menu and sets the appropriate link
+ * @param {Object} options
+ * @param {boolean} options.visible - The visibility of the mobile rollover / toc menu.
+ * @param {string} options.hashId - The id which the link will jump to.
+ */
+const toggleRolloverXS = ({ visible, hashId }) => {
+ const rolloverXSElement = document.querySelector('.table-of-contents-rollover-xs');
+
+ if (!visible) {
+ rolloverXSElement.style.display = 'none';
+ return;
+ }
+
+ const linkElement = rolloverXSElement.querySelector('.table-of-contents-rollover-link');
+ const headingElement = document.getElementById(hashId.substring(1));
+
+ linkElement.href = hashId;
+ linkElement.textContent = headingElement.textContent;
+ rolloverXSElement.style.display = 'flex';
+
+ return;
+}
+
+const isMobile = () => {
+ const screenMdBreakpoint = 992;
+ return window.innerWidth < screenMdBreakpoint
+};
+
+/*
+ * Adds click event listeners to the mobile rollover / toc menu
+ * A single click on a menu item will expand the menu with a
+ * display of a link along with the text of the element with the
+ * hash id corresponding to options.hashId.
+ *
+ * A second click will hide the expanded mobile menu.
+ */
+(async function EclipseFdnRolloverLink() {
+ const elements = document.querySelectorAll('.eclipsefdn-rollover-link');
+
+ elements.forEach(element => {
+ const options = {
+ hashId: element.dataset.hashId
+ }
+
+ if (!options.hashId) return;
+
+ const handleClick = () => {
+ if (isMobile() && activeMenuItemHashId !== options.hashId) {
+ toggleRolloverXS({ visible: true, hashId: options.hashId })
+ activeMenuItemHashId = options.hashId;
+
+ return;
+ }
+
+ toggleRolloverXS({ visible: false });
+ activeMenuItemHashId = null;
+ window.location.hash = options.hashId;
+ }
+
+ element.addEventListener('click', handleClick);
+ });
+
+ const rolloverXSElement = document.querySelector('.table-of-contents-rollover-xs');
+ rolloverXSElement.addEventListener('click', () => toggleRolloverXS({ visible: false }));
+
+ // Hide rollover-xs when clicked outside of table of contents and reset state of the active menu item
+ const handleOuterClick = event => {
+ const isOuterClick = !tableOfContentsElement.contains(event.target);
+
+ if (!isOuterClick) return;
+
+ toggleRolloverXS({ visible: false });
+ activeMenuItemHashId = null;
+ }
+
+ const tableOfContentsElement = document.querySelector('.collaborations-table-of-contents');
+ document.addEventListener('click', handleOuterClick);
+
+ // Hide rollover-xs when screen size changes to screen-md
+ window.addEventListener('resize', () => {
+ if (!isMobile() && activeMenuItemHashId) toggleRolloverXS({ visible: false });
+ });
+})();
\ No newline at end of file
diff --git a/js/src/collaborations/eclipsefdn.weighted-working-groups.js b/js/src/collaborations/eclipsefdn.weighted-working-groups.js
index 03aa9f650129e9b082a8a9ec70d5cc56d536f4b6..e1232e6037d0afdbd91d85b089d6b01414ac0aff 100644
--- a/js/src/collaborations/eclipsefdn.weighted-working-groups.js
+++ b/js/src/collaborations/eclipsefdn.weighted-working-groups.js
@@ -1,3 +1,16 @@
+/*!
+ * Copyright (c) 2022 Eclipse Foundation, Inc.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * Contributors:
+ * Olivier Goulet <olivier.goulet@eclipse-foundation.org>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
import template from '../templates/weighted-working-groups/working-group-block.mustache'
const defaultOptions = {
diff --git a/layouts/shortcodes/pages/collaborations/working-groups/brief/logo_grid.html b/layouts/shortcodes/pages/collaborations/working-groups/brief/logo_grid.html
new file mode 100644
index 0000000000000000000000000000000000000000..dd222b3e875a87b2bce522b2169291a1202624e8
--- /dev/null
+++ b/layouts/shortcodes/pages/collaborations/working-groups/brief/logo_grid.html
@@ -0,0 +1,13 @@
+<div class="row padding-top-20">
+ <ul class="logo-grid padding-0 margin-0">
+ {{ range .Site.Data.collaborations.founding_members }}
+ <li class="col-lg-4 col-md-6 col-xs-8">
+ <a href="{{ .website }}">
+ <div class="logo-grid-logo-wrapper">
+ <img class="logo-grid-logo" src="{{ .logo }}" alt="{{ .organization }}"/>
+ </div>
+ </a>
+ </li>
+ {{ end }}
+ </ul>
+</div>
\ No newline at end of file
diff --git a/layouts/shortcodes/pages/collaborations/working-groups/brief/sections.html b/layouts/shortcodes/pages/collaborations/working-groups/brief/sections.html
new file mode 100644
index 0000000000000000000000000000000000000000..dd5f844c8b3e8857555cbd9e7ca81bc6acde9ac1
--- /dev/null
+++ b/layouts/shortcodes/pages/collaborations/working-groups/brief/sections.html
@@ -0,0 +1,32 @@
+{{ $sections := .Page.Resources.Match "sections/*md" }}
+
+<div class="row">
+ <div class="sections">
+ <div class="sections-main">
+ {{ range $index, $section := $sections }}
+ <div class="sections-section container" id="{{ $section.Params.section_id }}">
+ <div class="section-heading">
+ <p class="section-heading-number">{{ add $index 1 }}</p>
+ <h3 class="section-heading-title">{{ $section.Title }}</h3>
+ </div>
+ </div>
+ <div class="sections-content">
+ <div class="sections-content-body">
+ {{ $section.Content }}
+ </div>
+ {{ if $section.Params.quote }}
+ <blockquote class="sections-content-quote">
+ {{ $dashed_author := printf "— %s" $section.Params.quote_author }}
+ <div class="sections-content-quote-icon-wrapper">
+ <img class="sections-content-quote-icon" src="images/icons/quote-icon.png" alt="" />
+ </div>
+ <p>{{ $section.Params.quote | markdownify }}”</p>
+ <cite class="sections-content-quote-author">{{ $dashed_author | markdownify }}</cite>
+ </blockquote>
+ {{ end }}
+ </div>
+ {{ end }}
+ </div>
+ <div class="sections-quote-bar"></div>
+ </div>
+</div>
diff --git a/layouts/shortcodes/pages/collaborations/working-groups/brief/table_of_contents.html b/layouts/shortcodes/pages/collaborations/working-groups/brief/table_of_contents.html
new file mode 100644
index 0000000000000000000000000000000000000000..08042738be27371c1d9808d567cd252c07eae3dd
--- /dev/null
+++ b/layouts/shortcodes/pages/collaborations/working-groups/brief/table_of_contents.html
@@ -0,0 +1,22 @@
+{{ $sections := .Page.Resources.Match "sections/*.md" }}
+
+<div class="collaborations-table-of-contents container margin-bottom-60">
+ <ul class="table-of-contents-links">
+ {{ range $index, $section := $sections }}
+ <li class="eclipsefdn-rollover-link table-of-contents-link-item" data-hash-id="#{{ $section.Params.section_id }}">
+ <div class="table-of-contents-link text-center" href="#{{ $section.Params.section_id }}">
+ <p class="table-of-contents-link-heading">{{ add $index 1 }}</p>
+ <div class="table-of-contents-rollover table-of-contents-rollover-md">
+ <p class="link-drop-content">{{ $section.Title }}</p>
+ <div class="link-drop-angle-container">
+ <div class="link-drop-angle"></div>
+ </div>
+ </div>
+ </div>
+ </li>
+ {{ end }}
+ </ul>
+ <div class="table-of-contents-rollover-xs table-of-contents-rollover">
+ <a class="table-of-contents-rollover-link"></a>
+ </div>
+</div>
\ No newline at end of file
diff --git a/less/images/collaborations/working-groups/brief/featured-section-bg.jpg b/less/images/collaborations/working-groups/brief/featured-section-bg.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c7e4278adfcca5a242518d9c52fad18ff8b11ca9
Binary files /dev/null and b/less/images/collaborations/working-groups/brief/featured-section-bg.jpg differ
diff --git a/less/page_css_file/collaborations/_variables.less b/less/page_css_file/collaborations/_variables.less
index a918dde453eb1edb04edc94790cdcbb65db775e8..0c81818e675e5f95772637d82a44cf331de0cd96 100644
--- a/less/page_css_file/collaborations/_variables.less
+++ b/less/page_css_file/collaborations/_variables.less
@@ -1,5 +1,5 @@
/*!
- * Copyright (c) 2021 Eclipse Foundation, Inc.
+ * Copyright (c) 2022 Eclipse Foundation, Inc.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v. 2.0 which is available at
@@ -11,9 +11,27 @@
* SPDX-License-Identifier: EPL-2.0
*/
+@brand-primary-darker: #FF8F00;
+@brand-primary-mid: #FFB769;
+@collaborations-black: #070606;
+
@section-dark-white: #FAF5F5;
@collaboration-gray: #F0EFEF;
@collaborating-item-color: #888890;
@collaborations-padding-y: 3em;
@collaborations-icon-wrapper-margin-top: 0.5em; // adjust for matching section header height
-@collaborations-btn-padding: 1em;
\ No newline at end of file
+@collaborations-btn-padding: 1em;
+
+@collaborations-text-black: @collaborations-black;
+@featured-section-brief-text-color: #F4F4F4;
+@sections-section-height-md: 18.5rem;
+@sections-section-height-xs: 16.5rem;
+@section-content-padding-y: 12rem;
+@section-content-padding-x: 10rem;
+@section-quote-bar-width: 28rem;
+@section-content-quote-padding-x: 4rem;
+@section-content-body-background-color: #E2DDDD;
+@section-content-body-hover-link-color: #0000CD;
+@section-content-body-hover-link-color-visited: #8B008B;
+@section-content-border-color: #B1ADAD;
+@table-of-contents-hover-background-color:#8D8888;
diff --git a/less/page_css_file/collaborations/styles.less b/less/page_css_file/collaborations/styles.less
index 2d4e9f0352a9ba39c7b75583936a82448019218f..fc80bd24751c6a06aef6c083d193bd89f1191b3f 100644
--- a/less/page_css_file/collaborations/styles.less
+++ b/less/page_css_file/collaborations/styles.less
@@ -26,7 +26,11 @@
td,
p,
h2,
- h3 {
+ .h2,
+ h3,
+ .h3,
+ h4,
+ .h4 {
color: @section-dark-white;
}
@@ -300,4 +304,344 @@
.btn {
white-space: normal;
}
+}
+.bold-header {
+ font-weight: 500;
+}
+
+// Brief Page
+.collaborations-brief-container {
+ h2,
+ .h2,
+ h4,
+ .h4,
+ h5,
+ .h5 {
+ &:extend(.bold-header);
+ }
+
+ .featured-section {
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+ h1,
+ .h1 {
+ font-size: 4rem;
+ font-weight: 700;
+ }
+ }
+
+ .featured-section-dark {
+ background-color: black;
+
+ h1,
+ .h1 {
+ color: @white;
+ }
+
+ h2,
+ .h2 {
+ color: @brand-primary;
+ font-weight: 600;
+ }
+
+ h4,
+ .h4 {
+ color: @white;
+ }
+
+ p {
+ color: @white;
+ }
+ }
+
+ .featured-section-brief {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ color: @featured-section-brief-text-color;
+ background-image: url('../../images/collaborations/working-groups/brief/featured-section-bg.jpg');
+
+ @media (min-width: @screen-sm-min) {
+ padding-top: 6rem;
+ padding-bottom: 6rem;
+ }
+ }
+
+ .sections {
+ position: relative;
+ }
+
+ .sections-quote-bar {
+ display: none;
+
+ @media (min-width: @screen-md-min) {
+ display: inline-block;
+ position: absolute;
+ top: @sections-section-height-md;
+ right: 0;
+ z-index: -1;
+ height: calc(100% - @sections-section-height-md);
+ width: @section-quote-bar-width;
+ background-color: @collaborations-black;
+ }
+ }
+
+ .section-heading {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ justify-content: left;
+ align-items: center;
+
+ @media (min-width: @screen-md-min) {
+ width: 70%;
+ }
+ }
+
+ .section-heading-number {
+ flex-grow: 0;
+ padding-right: 0.1em;
+ margin: 0;
+ color: @brand-primary;
+ filter: drop-shadow(0px 3px 6px #00000026);
+ font-size: 100px;
+ line-height: normal;
+
+ @media (min-width: @screen-md-min) {
+ font-size: 150px;
+ }
+ }
+
+ .section-heading-title {
+ flex-grow: 1;
+ }
+
+ .sections-section {
+ height: @sections-section-height-xs;
+ background-color: inherit;
+
+ @media (min-width: @screen-md-min) {
+ height: @sections-section-height-md;
+ }
+
+ &:target {
+ scroll-margin-top: 6rem;
+ }
+
+ h3,
+ .h3 {
+ font-size: 24px;
+ font-weight: 400;
+
+ @media (min-width: @screen-md-min) {
+ font-size: 32px;
+ }
+ }
+ }
+
+ .sections-content {
+ display: flex;
+ flex-direction: column;
+
+ @media (min-width: @screen-md-min) {
+ flex-direction: row;
+ }
+ }
+
+ .sections-content-body {
+ width: 100%;
+ padding: 4rem;
+ background-color: @section-content-body-background-color;
+
+ @media (min-width: @screen-md-min) {
+ width: calc(100% - @section-quote-bar-width);
+ padding: @section-content-padding-y @section-content-padding-x;
+
+ &:hover {
+ background-color: @brand-primary-mid;
+
+ a {
+ color: @section-content-body-hover-link-color;
+ }
+
+ a:visited {
+ color: @section-content-body-hover-link-color-visited;
+ }
+ }
+ }
+
+ p,
+ li {
+ color: @black;
+ }
+ }
+
+ .sections-content-quote {
+ flex-shrink: 0;
+ width: 100%;
+ padding: 4rem;
+ border: none;
+ color: @white;
+ background-color: @collaborations-black;
+ font-weight: 500;
+
+ @media (min-width: @screen-md-min) {
+ width: @section-quote-bar-width;
+ padding: @section-content-quote-padding-x;
+ padding-top: @section-content-padding-y;
+ }
+ }
+
+ .sections-content-quote-icon-wrapper {
+ margin-bottom: 4em;
+ width: 5em;
+ }
+
+ .sections-content-quote-icon {
+ width: 100%;
+ }
+
+ .sections-content-quote-author {
+ font-weight: 400;
+
+ p {
+ margin-bottom: 0;
+ }
+ }
+}
+
+// Table of Contents Bookmark
+.collaborations-table-of-contents {
+ position: sticky;
+ top: 0;
+ z-index: 10;
+ margin: 0 -15px;
+ padding: 0;
+
+ .table-of-contents-links {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ cursor: pointer;
+ user-select: none;
+ }
+
+ .table-of-contents-link-item {
+ width: 100%;
+ }
+
+ .table-of-contents-link {
+ display: inline-block;
+ position: relative;
+ width: 100%;
+ color: @white;
+ background-color: @brand-primary;
+ padding: 0.75em 0;
+
+ &:visited {
+ color: @white;
+ }
+
+ &:hover {
+ text-decoration: none;
+ background-color: @table-of-contents-hover-background-color;
+
+ @media (min-width: @screen-md-min) {
+ .table-of-contents-rollover-md {
+ display: inline-block;
+ }
+ }
+ };
+ }
+
+ .table-of-contents-link-heading {
+ font-size: 2rem;
+ font-weight: 900;
+ }
+
+ .table-of-contents-rollover {
+ background-color: @table-of-contents-hover-background-color;
+
+ a,
+ p {
+ color: @white;
+ }
+ }
+
+ .table-of-contents-rollover-md {
+ display: none;
+ }
+
+ @media (min-width: @screen-md-min) {
+ margin: auto;
+ margin-bottom: 6rem;
+
+ .table-of-contents-rollover-md {
+ position: absolute;
+ top: calc(100% - 1px);
+ left: 0;
+ width: 100%;
+ background-color: inherit;
+ }
+
+ .link-drop-content {
+ padding: 0 2rem 2rem 2rem;
+ }
+
+ .link-drop-angle-container {
+ position: relative;
+ }
+
+ .link-drop-angle {
+ position: absolute;
+ top: 100%;
+ width: 100%;
+ height: 4rem;
+ background-color: @table-of-contents-hover-background-color;
+ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 0%);
+ }
+ }
+
+ .table-of-contents-rollover-xs {
+ position: absolute;
+ display: none;
+ align-items: center;
+ width: 100%;
+ min-height: 100%;
+ background-color: @table-of-contents-hover-background-color;
+ padding: 1rem;
+
+ @media (min-width: @screen-md-min) {
+ display: none;
+ }
+ }
+}
+
+.logo-grid {
+ list-style: none;
+
+ .logo-grid-logo-wrapper {
+ display: flex;
+ align-items: center;
+ width: 8rem;
+ height: 8rem;
+ padding: 1rem;
+ margin: 1rem 0;
+ background-color: @white;
+ border: 1px @section-content-border-color solid;
+
+ @media (min-width: @screen-xs-min) {
+ width: 10.5rem;
+ height: 10.5rem;
+ }
+ }
+
+ .logo-grid-logo {
+ width: 100%;
+ object-fit: contain;
+ }
}
\ No newline at end of file