diff --git a/packages/lit-dev-content/site/css/home.css b/packages/lit-dev-content/site/css/home.css index 2a2757538..814d4b150 100644 --- a/packages/lit-dev-content/site/css/home.css +++ b/packages/lit-dev-content/site/css/home.css @@ -5,6 +5,7 @@ @import url('./home/5-who-is-using.css'); @import url('./home/6-explore.css'); @import url('./home/7-connect.css'); +@import url('./home/8-open-governance.css'); html { --home-side-margin: 2rem; diff --git a/packages/lit-dev-content/site/css/home/8-open-governance.css b/packages/lit-dev-content/site/css/home/8-open-governance.css new file mode 100644 index 000000000..aba3cfbe6 --- /dev/null +++ b/packages/lit-dev-content/site/css/home/8-open-governance.css @@ -0,0 +1,86 @@ +#open-governance { + padding: 4em var(--home-side-margin) 5em var(--home-side-margin); + background-color: black; + color: white; +} + +#open-governance > h1 { + margin-bottom: 1em; + max-width: var(--content-max-width); + margin: auto; +} + +#openGovernanceContent { + max-width: var(--content-max-width); + margin: auto; + margin-top: 2.5em; + display: flex; + align-items: center; + gap: 80px; +} + +#openGovernanceLogo { + flex: 1; + display: flex; + justify-content: center; + align-items: center; +} + +#openGovernanceLogo lazy-svg { + width: 100%; + max-width: 320px; +} + +#openGovernanceText { + flex: 1; +} + +#openGovernanceText h2 { + font-size: 24px; + margin-top: 0; +} + +#openGovernanceText a { + color: white; + text-decoration: underline; +} + +#openGovernanceText a:hover, +#openGovernanceText a:focus { + background-color: var(--sys-color-primary-container); + color: var(--sys-color-on-primary-container); +} + +#open-governance .openGovernanceLink { + background-color: var(--sys-color-primary); + color: var(--sys-color-on-primary); + font-size: 14px; + font-weight: 700; + padding: 8px 16px; + text-align: center; + text-decoration: none; + display: inline-block; + margin-top: 25px; +} + +#open-governance .openGovernanceLink:hover, +#open-governance .openGovernanceLink:focus { + background-color: var(--sys-color-primary-container); + color: var(--sys-color-on-primary-container); +} + +@media (max-width: 860px) { + #openGovernanceContent { + flex-direction: column; + gap: 40px; + text-align: center; + } + + #openGovernanceLogo { + order: -1; + } + + #openGovernanceLogo lazy-svg { + max-width: 280px; + } +} diff --git a/packages/lit-dev-content/site/home/8-open-governance.html b/packages/lit-dev-content/site/home/8-open-governance.html new file mode 100644 index 000000000..583256832 --- /dev/null +++ b/packages/lit-dev-content/site/home/8-open-governance.html @@ -0,0 +1,21 @@ +
+

Built to Last

+
+ +
+

+ Lit is an OpenJS Foundation + Impact Project. +

+

+ Lit joins Node.js, Electron, and webpack as an Impact Project. Its Technical + Steering Committee includes representatives from companies like Google, + Adobe, Reddit, as well as independent maintainers - Lit's future is + shaped by its community, not any single company's roadmap. +

+ Read the announcement +
+
+
diff --git a/packages/lit-dev-content/site/images/logos/openjs-foundation-horizontal.svg b/packages/lit-dev-content/site/images/logos/openjs-foundation-horizontal.svg new file mode 100644 index 000000000..09bfe2c7d --- /dev/null +++ b/packages/lit-dev-content/site/images/logos/openjs-foundation-horizontal.svg @@ -0,0 +1,58 @@ + + + + \ No newline at end of file diff --git a/packages/lit-dev-content/site/index.html b/packages/lit-dev-content/site/index.html index c88b5589b..6d68206ea 100644 --- a/packages/lit-dev-content/site/index.html +++ b/packages/lit-dev-content/site/index.html @@ -23,5 +23,6 @@ {% include "./home/5-who-is-using.html" %} {% include "./home/6-explore.html" %} {% include "./home/7-connect.html" %} +{% include "./home/8-open-governance.html" %} {% endblock %}