Merge pull request #2398 from patternfly/docs/cleanup

docs: improvements

docs/_includes/_foot.njk

@@ -5,28 +5,6 @@
 {% endfor %}
 
 <rh-global-footer>
-  <a class="global-logo-anchor" slot="logo"
-    part="logo-anchor"
-    href="https://www.redhat.com"
-    alt="Visit Red Hat">
-    <svg title="Red Hat logo"
-      class="global-logo-image"
-      part="logo-image"
-      data-name="Layer 1"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 192 145">
-      <defs>
-        <style>
-          .band {
-            fill: transparent;
-          }
-        </style>
-      </defs>
-      <path class="band" d="M157.77,62.61a14,14,0,0,1,.31,3.42c0,14.88-18.1,17.46-30.61,17.46C78.83,83.49,42.53,53.26,42.53,44a6.43,6.43,0,0,1,.22-1.94l-3.66,9.06a18.45,18.45,0,0,0-1.51,7.33c0,18.11,41,45.48,87.74,45.48,20.69,0,36.43-7.76,36.43-21.77,0-1.08,0-1.94-1.73-10.13Z" />
-      <path class="cls-1" d="M127.47,83.49c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89,8.69,103.76.5,97.51.5,91.69.5,90,8,83.06,8c-6.68,0-11.64-5.6-17.89-5.6-6,0-9.91,4.09-12.93,12.5,0,0-8.41,23.72-9.49,27.16A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33C22.27,52,.5,55,.5,74.22c0,31.48,74.59,70.28,133.65,70.28,45.28,0,56.7-20.48,56.7-36.65,0-12.72-11-27.16-30.83-35.78" />
-    </svg>
-  </a>
-
   <h3 slot="links-primary" hidden>Community</h3>
   <ul slot="links-primary">
     <li><a href="https://github.com/patternfly/patternfly-elements">GitHub</a></li>

docs/_includes/layout-docs.njk

@@ -5,10 +5,9 @@ layout: layout-basic.njk
 <header class="band">
   <h1>{{ title }}</h1>
   {% if tagline %}
-  <p class="tagline">{{ tagline }}</p>
+  <span class="tagline">{{ tagline }}</span>
   {% endif %}
 </header>
 
-{%- band -%}
-  {{ content | safe }}
-{%- endband -%}
+{{ content | safe }}
+

docs/docs/develop/create.md

@@ -6,13 +6,14 @@ tags:
   - develop
 ---
 
-{% band header="Prerequisites" %}
+{% band %}
+
   Before you begin, make sure you've followed the 
   [Prerequisites](/docs/develop/setup#prerequisites) in 
   [Setup](/docs/develop/setup).
-{% endband %}
 
-{% band header="The PatternFly Element Generator" %}
+  <h3>PatternFly Element generator</h3>
+
   Use the PatternFly Element generator to start the scaffolding process. From 
   the root directory of the PatternFly Elements  repository, run the following 
   command.

docs/docs/develop/css.md

@@ -6,6 +6,15 @@ tags:
   - develop
 ---
 
+<style>
+  img {
+    max-width: 100%;
+  }
+</style>
+
+
+{% band %}
+
 We want the `pf-cool-element` to have a profile photo, a username, and a follow button.
 Right now, it only contains the HTML structure, but we can style our element by 
 updating our CSS to make it look the way we want.
@@ -52,3 +61,5 @@ We can accomplish both of these tasks by updating the `pf-cool-element.ts` file.
 <a href="{{ '/theming/' | url }}">Learn more about applying a theme.</a>
 
 <a class="cta" href="{{ '../javascript' | url }}">Next up: Write your JavaScript</a>
+
+{% endband %}

docs/docs/develop/html.md

@@ -6,6 +6,14 @@ tags:
   - develop
 ---
 
+<style>
+  img {
+    max-width: 100%;
+  }
+</style>
+
+{% band %}
+
 Now that our element is set up and our dev server is running, let's take 
 advantage of the slot and shadow root to make our element a bit more 
 interesting.
@@ -69,3 +77,5 @@ changes automatically.
 Now that we've added the HTML, let's style our element by updating the CSS file.
 
 <a class="cta" href="../css">Next up: Write your CSS</a>
+
+{% endband %}

docs/docs/develop/javascript.md

@@ -6,6 +6,14 @@ tags:
   - develop
 ---
 
+<style>
+  img {
+    max-width: 100%;
+  }
+</style>
+
+{% band %}
+
 In this step, we will:
 
 1.  Add a click and keyup listener to the follow button
@@ -229,3 +237,5 @@ declare global {
 Out next step is to write unit test for our component so that we can use it with greater confidence.
 
 <a class="cta" href="../testing">Next up: Write your tests</a>
+
+{% endband %}

docs/docs/develop/pull-request.md

@@ -6,6 +6,8 @@ tags:
   - develop
 ---
 
+{% band %}
+
 1. Create a PR using the template provided, ensure all fields are filled out to the best of your ability.
 2. If you used the discovery template, please copy that content as necessary into the README.md for that component.
 3. Confirm that your component has all attributes and slots documented clearly in the schema and the README file.
@@ -18,3 +20,5 @@ tags:
 5. Ensure someone has run through browser testing on all the listed environments in the PR template.
 6. Find someone to code review your branch.
 7. Once approved and all tests are passing, run a squash merge following [conventional commit standards](https://www.conventionalcommits.org) into main.
+
+{% endband %}

docs/docs/develop/structure.md

@@ -6,16 +6,25 @@ tags:
   - develop
 ---
 
-Run this command from the project root to start the build, watch, and server processes, see others in the project README.
+<style>
+  img {
+    max-width: 100%;
+  }
+</style>
+
+{% band %}
+
+Run this command from the project root to start the build, watch, and server processes.
 ```bash
-npm run dev
+npm run start
 ```
 
 The server will load on `http://localhost:8000` by default.
 
+<!-- TODO: Update Graphic to a more current image -->
 ![npm run live-demo command](/images/develop/develop-structure.png)
 
-Assuming the `dev` command started a server on port 8000, navigate to `http://localhost:8000/demo/pf-cool-element/` to view your element.
+Assuming the `start` command started a server on port 8000, navigate to `http://localhost:8000/components/cool-element/demo/` to view your element.  Depending on other projects you are running via NPM the port number may differ.
 
 You're off to a good start! You have a new custom element that extends the base LitElement class.
 
@@ -124,3 +133,5 @@ JavaScript objects which work with LitElement.
 Now that our dev server is running and we have our element's structure, let's make it actually do something.
 
 <a class="cta" href="../html">Next up: Write your HTML</a>
+
+{% endband %}

docs/docs/develop/testing.md

@@ -6,6 +6,14 @@ tags:
   - develop
 ---
 
+<style>
+  img {
+    max-width: 100%;
+  }
+</style>
+
+{% band %}
+
 Let's write tests for `pf-cool-element`.
 
 We rely on a few tools to ensure our element is reliable in production:
@@ -258,3 +266,5 @@ A quick note about the framework testing—the Vue and React tests are meant to
 That's it for testing! Now that we've created our `pf-cool-element` and all of our code passes, the final step is to submit a pull request to get this merged.
 
 <a class="cta" href="../pull-request">Next up: Open a pull request</a>
+
+{% endband %}

docs/docs/develop/todo.md

@@ -6,11 +6,13 @@ tags:
   - develop
 ---
 
-## Overview
+{% band header="Overview" %}
+
 The items below represent in-code `// @TODO` notes we have left for ourselves to ensure updates are made later on when we have more time.
 
-{%- band %}
+{% endband %}
 
+{% band %}
 <table>
   <thead>
     <tr><th>Description</th><th>Location</th></tr>
@@ -25,4 +27,4 @@ The items below represent in-code `// @TODO` notes we have left for ourselves to
   </tbody>
 </table>
 
-{% endband -%}
+{% endband %}

docs/docs/develop/troubleshooting.md

@@ -6,8 +6,10 @@ tags:
   - develop
 ---
 
-## Troubleshooting
+{% band %}
 
 You may experience issues when developing against the PatternFly Elements repository.
 This page contains a number of troubleshooting steps you should follow if you run into problems while working on PatternFly Elements.
-If you are using PatternFly Elements in your own pages and applications and experience an issue, [please open an issue on GitHub]()
+If you are using PatternFly Elements in your own pages and applications and experience an issue, [please open an issue on GitHub](https://github.com/patternfly/patternfly-elements/issues)
+
+{% endband %}

docs/framework-integration/index.md

@@ -3,11 +3,27 @@ layout: layout-basic.njk
 title: Framework integration
 ---
 
+<style>
+  #framework {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns:repeat(2,[col-start] 1fr);
+    max-width: 1020px;
+    padding: 2rem 1rem;
+  }
+
+  @media screen and (min-width: 820px) {
+    #framework {
+      padding-inline: 4rem;
+    }
+  }
+</style>
+
 <header class="band">
   <h1>{{ title }}</h1>
 </header>
 
-{% band %}
+<section id="framework">
   <pf-card color-palette="lightest" border>
     <h3 slot="header" class="push-bottom">
       <a href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-react-app-fe079be262ed">Using
@@ -35,12 +51,5 @@ title: Framework integration
       follow along, go ahead and...</p>
     <a class="cta" slot="footer" href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-angular-app-4b18b1c9c363">Read on Medium</a>
   </pf-card>
-{% endband %}
+</section>  
 
-<style>
-  section.band {
-    display: grid;
-    gap: 1rem;
-    grid-template-columns:repeat(12,[col-start] 1fr);
-  }
-</style>

docs/home.css

@@ -55,9 +55,6 @@
 #lightw {
   display: grid;
   gap: 1em;
-}
-
-#lightw {
   grid-template-columns: 1fr 1fr;
   grid-template-areas:
     'h h'
@@ -76,6 +73,11 @@
 #lightw > pf-progress-stepper { grid-area: step; }
 #lightw > pre { grid-area: snip; margin-block: 0; }
 
+#lightw,
+#univ {
+  padding: var(--pf-global--spacer--xl, 2rem) var(--pf-global--spacer--md, 1rem);
+}
+
 #univ {
   width: 100vw;
   max-width: 100vw;
@@ -91,27 +93,25 @@
   padding: 0;
 }
 
-#univ > * {
-  max-width: 100%;
-  overflow: hidden;
-}
-
 #univ svg {
   width: 16px;
 }
 
+#lightw,
+.max-width-container {
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
 rh-global-footer {
   width: 100vw !important;
   translate: none !important;
   transform: none;
-  --rh-footer-icon-color: var(--rh-color-black-500, #8a8d90);
-  --rh-footer-icon-color-hover: var(--rh-color-black-400, #b8bbbe);
 }
 
-rh-global-footer .global-logo-image {
-  fill: var(--rh-footer-icon-color);
-}
-
-rh-global-footer .global-logo-image:is(:hover, :focus-within) {
-  fill: var(--rh-footer-icon-color-hover);
+@media (min-width: 820px) {
+  #lightw,
+  .max-width-container {
+    padding: var(--pf-global--spacer--3xl, 4rem) var(--pf-global--spacer--3xl, 4rem);
+  }
 }