docs: adding new PFE logo SVG

docs/_includes/_head.njk

@@ -6,7 +6,7 @@
   <meta name="description" content="{{ title }} - PatternFly Elements">
   <meta name="pf-auto-reveal" content="true">
   <title>{{ element.title or title }} - PatternFly Elements</title>
-  <link href="{{ '/brand/logo/svg/pfe-icon-blue.svg' | url }}" rel="shortcut icon">
+  <link href="{{ '/images/favicon.ico' | url }}" rel="shortcut icon">
 
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link

docs/_includes/_nav.njk

@@ -1,48 +1,50 @@
 <header>
-  <div class="logo-bar">
-    <a href="{{ '/' | url }}">
-      <img src="{{ '/brand/logo/svg/pfe-icon-white-shaded.svg' | url }}" alt="PatternFly Elements - Home">
-      PatternFly Elements
-    </a>
-    {# TODO: implement pf-dropdown
-    <pf-dropdown id="docs-versions-dropdown" aria-label="Docs Versions" label="Docs Versions">
-      {% for version in versions %}
-      {%- if version.current -%}
-        {%- set prefix = '' -%}
-      {%- else -%}
-        {%- set prefix = '/' + version.slug -%}
-      {%- endif %}
-      <pf-dropdown-item
-          item-type="link"
-          data-version="{{ version.slug }}"
-          data-label="{{ version.label }}">
-        <a href="{{ prefix }}{{ page.url }}">{{ version.label }}</a>
-      </pf-dropdown-item>
-      {% endfor %}
-    </pf-dropdown>
-    #}
-    <select id="docs-versions-dropdown" aria-label="Docs Versions" oninput="location.href=this.options[this.selectedIndex].value">
-      {% for version in versions %}
-      {%- if version.current -%}
-        {%- set prefix = '' -%}
-      {%- else -%}
-        {%- set prefix = '/' + version.slug -%}
-      {%- endif %}
-      <option
-          value="{{ prefix }}{{ page.url }}"
-          data-version="{{ version.slug }}"
-          data-label="{{ version.label }}">{{ version.label }}</option>
-      {% endfor %}
-    </select>
-    <script type="module">
-      const dropdown = document.getElementById('docs-versions-dropdown');
-      const items = dropdown.querySelectorAll('[data-version]');
-      const versions = Object.fromEntries(Array.from(items, x => [x.dataset.version, x]));
-      const [fst] = new URL(location.href).pathname.split('/').filter(Boolean);
-      let [highest] = Object.keys(versions).sort().reverse();
-      const selected = fst in versions ? versions[fst] : versions[highest];
-      dropdown.setAttribute('label', selected.dataset.label);
-    </script>
+  <div class="header-bar">
+   {% include "../_snippets/pf-bar-html.md" %}
+    <div class="logo-bar">
+      <a href="{{ '/' | url }}" aria-label="PatternFly Elements Home">
+        <img src="{{ '/images/pfe-logo-inverse-white.svg' | url }}" alt="PatternFly Elements">
+      </a>
+      {# TODO: implement pf-dropdown
+      <pf-dropdown id="docs-versions-dropdown" aria-label="Docs Versions" label="Docs Versions">
+        {% for version in versions %}
+        {%- if version.current -%}
+          {%- set prefix = '' -%}
+        {%- else -%}
+          {%- set prefix = '/' + version.slug -%}
+        {%- endif %}
+        <pf-dropdown-item
+            item-type="link"
+            data-version="{{ version.slug }}"
+            data-label="{{ version.label }}">
+          <a href="{{ prefix }}{{ page.url }}">{{ version.label }}</a>
+        </pf-dropdown-item>
+        {% endfor %}
+      </pf-dropdown>
+      #}
+      <select id="docs-versions-dropdown" aria-label="Docs Versions" oninput="location.href=this.options[this.selectedIndex].value">
+        {% for version in versions %}
+        {%- if version.current -%}
+          {%- set prefix = '' -%}
+        {%- else -%}
+          {%- set prefix = '/' + version.slug -%}
+        {%- endif %}
+        <option
+            value="{{ prefix }}{{ page.url }}"
+            data-version="{{ version.slug }}"
+            data-label="{{ version.label }}">{{ version.label }}</option>
+        {% endfor %}
+      </select>
+      <script type="module">
+        const dropdown = document.getElementById('docs-versions-dropdown');
+        const items = dropdown.querySelectorAll('[data-version]');
+        const versions = Object.fromEntries(Array.from(items, x => [x.dataset.version, x]));
+        const [fst] = new URL(location.href).pathname.split('/').filter(Boolean);
+        let [highest] = Object.keys(versions).sort().reverse();
+        const selected = fst in versions ? versions[fst] : versions[highest];
+        dropdown.setAttribute('label', selected.dataset.label);
+      </script>
+    </div>
   </div>
 
   <input id="mobile-menu-toggle" class="menu-toggle element-invisible" type="checkbox"

docs/_snippets/pf-bar-html.md

@@ -0,0 +1,9 @@
+<div class="pf-bar">
+  <a href="https://www.patternfly.org/" class="cta">
+    PatternFly.org
+  </a>
+  <a href="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/patternfly/patternfly-elements" class="cta">
+    <pf-icon size="md" icon="github" set="fab" aria-hidden="true"></pf-icon>
+    Contribute on Github
+  </a>
+</div>

docs/docs/develop/setup.md

@@ -142,7 +142,7 @@ tags:
 {% endband %}
 
 {% band header="Create a PatternFly Element" %}
-  Now that we have understand how it all works, let's create a PatternFly Element together.
+  Now that we understand the basics, let's create a new PatternFly Element.
 
   <a class="cta" href="{{ '/docs/develop/create' | url }}">Create a PatternFly Element</a>
 {% endband %}

docs/home.css

@@ -1,68 +1,71 @@
 #home-header {
   display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  color: white;
+  background-color: var(--pf-theme--color--accent, #0066cc);
   justify-content: center;
   text-align: center;
-  flex-wrap: wrap;
-  gap: 16px;
-  background-color: #004080;
-  color: white;
-  padding-block-end: 0;
-  padding-inline: 1rem;
-  max-width: 100%;
+  padding: 4rem 0;
 }
 
 #home-header h1 {
   display: flex;
-  flex-direction: column;
   justify-content: center;
-  align-items: center;
-  gap: 1rem;
+  text-align: center;
 }
 
 #home-header h1 img {
-  width: 6rem;
-  translate: 0 2rem;
-  object-fit: none;
+  width: 650px;
+  max-width: 100%;
+  padding: 0 1rem;
 }
 
-@media (min-width: 767px) {
-  #home-header h1 {
-    flex-direction: row;
-    gap: 0;
-  }
+#home-header p {
+  font-family: "Red Hat Display", sans-serif;
+  font-size: var(--pf-c-title--m-xl--FontSize, var(--pf-global--FontSize--xl, 1.25rem));
+  font-weight: var(--pf-c-title--m-xl--FontWeight, var(--pf-global--FontWeight--normal, 500));
+  line-height: var(--pf-c-title--m-xl--LineHeight, var(--pf-global--LineHeight--md, 1.5));
+}
 
-  #home-header h1 img {
-    translate: 0;
-  }
+.cta-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
 }
 
-#home-header > :is(h1, p) {
-  width: 100%;
-  max-width: 100%;
+#home-header a {
+  font-size: var(--pf-global--FontSize--lg, 1.125rem);
+}
+
+#home-header a.cta.primary {
+  --pf-cta--Color: #06c;
 }
 
-#home-header pf-icon {
- color: #666
+#home-header a.cta.primary:hover {
+  --pf-cta--Color--hover: var(--pf-theme--color--white, #fff);
+  --pf-cta--BackgroundColor: transparent;
 }
 
-#home-header section {
-  margin-block-start: 48px;
-  color: black;
-  width: calc(100% + 2rem);
-  margin-inline: -2rem;
+#home-header a.cta.secondary:hover {
+  --pf-cta--Color--hover: #06c;
 }
 
+
 #lightw {
   display: grid;
   gap: 1em;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
   grid-template-areas:
-    'h h'
-    'tag tag'
-    'p p'
-    'snip snip'
-    'card step'
-    'link link';
+    'h'
+    'tag'
+    'p'
+    'snip'
+    'card'
+    'step'
+    'link';
 }
 
 #lightw > .subtitle { grid-area: tag; }
@@ -115,3 +118,20 @@ rh-global-footer {
     padding: var(--pf-global--spacer--3xl, 4rem) var(--pf-global--spacer--3xl, 4rem);
   }
 }
+
+@media screen and (min-width: 768px) {
+  .cta-group {
+    flex-direction: row;
+  }
+
+  #lightw {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      'h h'
+      'tag tag'
+      'p p'
+      'snip snip'
+      'card step'
+      'link link';
+  }
+}

docs/index.html

@@ -3,26 +3,22 @@
 title: PatternFly Elements
 templateEngineOverride: njk
 description: A set of community-created web components based on PatternFly design.
-githubLink: https://github.com/patternfly/patternfly-elements
 ---
 
 <link rel="stylesheet" href="home.css">
 
 <body>
+  {% renderFile "./docs/_snippets/pf-bar-html.md" %}
   <header class="band accent" id="home-header">
     <h1>
-      <img alt="" src="{{ '/images/logo/pfe-icon-white-shaded.svg' | url }}">
-      <span>{{ title }}</span>
+      <img alt="" src="{{ '/images/pfe-logo-inverse-white.svg' | url }}">
+      <span class="sr-only">{{ title }}</span>
     </h1>
     <p>{{ description }}</p>
-    <a class="cta primary" href="{{ 'get-started' | url }}">Get started</a>
-    <a class="cta secondary" href="{{ 'components' | url }}">View the components</a>
-    <section class="band small base">
-      <a class="cta" href="{{ githubLink }}">
-        <pf-icon size="md" icon="github" set="fab" aria-hidden="true"></pf-icon>
-        Contribute on GitHub
-      </a>
-    </section>
+    <div class="cta-group">
+      <a class="cta primary" href="{{ 'get-started' | url }}">Get started</a>
+      <a class="cta secondary" href="{{ 'components' | url }}">View the components</a>
+    </div>
   </header>
   <main>
     <section id="lightw" class="band">
@@ -68,6 +64,7 @@ <h2>Universal</h2>
             It's up to you and the needs of your project.</p>
         </header>
 
+
         <pf-tabs>
           <pf-tab slot="tab">HTML<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23m53.5-69h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8-16.1-24.8V69h-22.6m89.2-69h23v46.2h32.6V69h-55.6"/><path fill="#e44d26" d="m107.6 471-33-370.4h362.8l-33 370.2L255.7 512"/><path fill="#f16529" d="M256 480.5V131h148.3L376 447"/><path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4m2 22.8H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"/><path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6m-4.1 46.5H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8"/></svg></pf-tab>
           <pf-tab-panel>{% renderFile "./docs/_snippets/accordion-html.md" %}</pf-tab-panel>