chore: add supported by to website

This commit is contained in:
thepassle
2020-12-04 14:42:57 +01:00
committed by Thomas Allmer
parent 97309eecd8
commit ea29bbe48e
3 changed files with 109 additions and 0 deletions

View File

@@ -114,6 +114,21 @@ rocket-navigation > ul > li > a {
text-transform: none!important;
}
.supported-by-items {
justify-content: center;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
column-gap: 100px;
row-gap: 40px;
color: var(--text-color);
margin-top: 60px;
}
.supported-by-items div {
margin-left: auto;
margin-right: auto;
}
@media (prefers-color-scheme: dark) {
.markdown-body {
color: var(--primary-text-color);

72
docs/_includes/home.njk Normal file
View File

@@ -0,0 +1,72 @@
{% extends 'layout.njk' %}
{% block bodyTag %}
<body layout="home" home-layout="{{rocketLaunch.homeLayout}}">
{% endblock bodyTag %}
{% block sidebar %}
<rocket-drawer id="sidebar">
<nav slot="content" id="sidebar-nav">
{% include 'partials/logoLink.njk' %}
<rocket-navigation>
<ul>
{%- for entry in collections.header %}
<li>
<a href="{{ entry.url | url }}" class="
{% if entry.url == page.url %} current {% endif %}
{% if (page.url.search(entry.url) !== -1) and (page.url !== '/') %} active {% endif %}
">{{ entry.data.eleventyNavigation.key }}</a>
</li>
{%- endfor %}
</ul>
{% include 'partials/mobile-sidebar-bottom.njk' %}
</rocket-navigation>
</nav>
</rocket-drawer>
{% endblock sidebar %}
{% block main %}
<main class="markdown-body">
<img class="page-logo" src="{{ '_assets/logo.svg' | asset | url }}" alt="{{ site.title }} Logo"/>
{% if rocketLaunch.homeLayout === 'background' %}
<img class="page-background" src="{{ '_assets/home-background.svg' | asset | url }}" role="presentation"/>
{% endif %}
<h1 class="page-title">{{ title }}</h1>
<p class="page-slogan">{{slogan}}</p>
<div class="call-to-action-list">
{% for callToAction in callToActionItems %}
<a class="call-to-action" href="{{ callToAction.href | url }}">{{ callToAction.text | safe }}</a>
{% endfor %}
</div>
<h2 class="reason-header">{{ reasonHeader }}</h2>
<div class="reasons">
{% for reason in reasons %}
<div>
<h3>{{ reason.header }}</h3>
{{ reason.text | safe }}
</div>
{% endfor %}
</div>
<h2 class="reason-header">{{ supportedByHeader }}</h2>
<div class="reasons supported-by-items">
{% for item in supportedByItems %}
<div>
<a href="{{ item.href }}">
<img src="{{ item.image }}" alt="{{ item.name }}" width="{{ item.width }}"/>
</a>
</div>
{% endfor %}
</div>
{{ content.html | safe }}
{% include 'partials/previousNext.njk' %}
</main>
{% endblock main %}

View File

@@ -20,4 +20,26 @@ reasons:
text: 'Open Web Components is a community-effort, independent of any framework or company. We are based on open-source tools and services.',
},
]
supportedByHeader: 'Supported by:'
supportedByItems:
[
{
name: 'Browserstack',
width: 180,
href: 'http://browserstack.com/',
image: 'https://raw.githubusercontent.com/open-wc/open-wc/97309eecd83e8b58dffc08a4fb4aa049d062a22b/assets/images/Browserstack-logo.svg',
},
{
name: 'ING',
width: 100,
href: 'http://ing.com/',
image: 'https://www.ing.com/static/ingdotcompresentation/static/img/logos/logo.hd.png',
},
{
name: 'Netlify',
width: 100,
href: 'http://netlify.com/',
image: 'https://www.netlify.com/img/press/logos/full-logo-light.svg',
},
]
---