Change Header in Guideline details

[c0ldbear]

Changing the Header for Guideline details so that it is just a smaller Globe in the left-hand corner.

Summary of changes

• Create new component for Header in Guideline details (HeaderGuideline) with just the Globe in the left-hand corner
• Move the Header component to be inside of Guidelines component instead of having it in App.tsx.

[netlify[bot]]

✅ Deploy Preview for websustainability ready!

Name	Link
🔨 Latest commit	3fa71299f3e5373862cdb4aec1c84b6416527673
🔍 Latest deploy log	https://app.netlify.com/sites/websustainability/deploys/65b272b3eae3dd000819b96c
😎 Deploy Preview	https://deploy-preview-22--websustainability.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[annavik]

Looks great Teddy!! I suggest we add the small globe to all pages, not just details

Then if we extract page intro

        <div>
          <h1>websustainability.io</h1>
          <h2>
            An interactive version of{" "}
            <a href="https://w3c.github.io/sustyweb/">WSG 1.0</a>
          </h2>
        </div>

to separate component to only include on page Gudelineswe don't need to duplicate the Header code.

Is it making sense?

[c0ldbear]

Looks great Teddy!! I suggest we add the small globe to all pages, not just details

Then if we extract page intro

        <div>
          <h1>websustainability.io</h1>
          <h2>
            An interactive version of{" "}
            <a href="https://w3c.github.io/sustyweb/">WSG 1.0</a>
          </h2>
        </div>

to separate component to only include on page Gudelineswe don't need to duplicate the Header code.

Is it making sense?

It makes sense :) I can give it a try. So the expected result of this would be that we would have the small globe also for the Guidelines component?

And do we still want to keep the big globe in the Guidelines component?

[annavik]

Looks great Teddy!! I suggest we add the small globe to all pages, not just details Then if we extract page intro

        <div>
          <h1>websustainability.io</h1>
          <h2>
            An interactive version of{" "}
            <a href="https://w3c.github.io/sustyweb/">WSG 1.0</a>
          </h2>
        </div>

to separate component to only include on page Gudelineswe don't need to duplicate the Header code. Is it making sense?

It makes sense :) I can give it a try. So the expected result of this would be that we would have the small globe also for the Guidelines component?

And do we still want to keep the big globe in the Guidelines component?

Sorry, forgot to answer!! Yes I think so, or what do you think? :)