Docs site needs a footer

[viktor]

I think matching the footer to the one found on this forum would be a good idea. But it can also be matched to the main CP site. I prefer the forum one, it has more valuable links and info.

[anon66243189]

can’t believe that I spend more time creating a stick-to-bottom footer than I spent creating the whole site

<div class="footer-wrapper">
  <footer class="site-info">
    <div class="inside-site-info grid-container grid-parent">
      <div>
        <span>ClassicPress Documentation</span> • Made with  <a class="footer-link" href="https://www.classicpress.net"><strong>ClassicPress</strong></a>   
        <br>
        <span><a class="footer-link-grey" href="https://www.classicpress.net/privacy-policy/">Privacy Policy</a></span>           
      </div>
    </div>
  </footer>
</div>

This goes just before closing body tag

CSS:

.site-info {
	color: #ffffff;
	background-color: #222222;
	text-align: center;
	padding: 20px;
	font-size: 15px;
}

a.footer-link{
	color:  white;
}
a.footer-link-grey{
	color:  rgb(128, 122, 122);
}

Magician needed to stick this thing to the bottom of any and all screen if the content of page is less than, and let the footer be pushed, if the content is more than screen height (that already works)
I am a design catastrophe and don’t think I understand CSS at all

Perhaps someone who is more conformable with this can help on the simple footer?

I am sorry, usually I use bootstrap, which kind of saves me the headache to think.

@joyously - I think you have Theme Dev background?
Probably for you this is a no brainer…

IS screenshot

SHOULD screenshot

[joyously]

You can use flex to keep the footer in place, or put a min-height using vh on the content area.

[james]

I agree Flexbox is the way to go here. Added based on the following references:

• Sticky Footer — Solved by Flexbox — Cleaner, hack-free CSS
• Ordering flex items - CSS: Cascading Style Sheets | MDN
• "order" | Can I use... Support tables for HTML5, CSS3, etc

Code changes: Add static footer · ClassicPress/site-docs@5aeac82 · GitHub

I had to change the way the admin bar is positioned from fixed (with a margin-top applied to the html element) to just letting flexbox handle it. This actually seems much better to me, and it seems to work fine on a variety of different types of pages, but there might still be issues. Please let us know here if you see anything.

[viktor]

That looks good. Only suggestion is to make privacy policy link lighter to increase contrast ratio for accessibility.

[james]

Done.

[anon66243189]

@James - this change broke the header on some pages

I can see it is due to

body > header, #page {
flex: 1;
}

I added this to fix it back (directly to site, not git)

body:not(.home) > #masthead  {
  max-height: 61px;
}

It seems to have fixed it back.

[joyously]

@james

I had to change the way the admin bar is positioned from fixed (with a margin-top applied to the html element) to just letting flexbox handle it.

Is the admin bar in the bottom of the page source? In WP, this was considered an a11y issue, and once they had added the wp_body_open() hook, they used it for the admin bar to be first in the page, checking at the end of the page for whether that hook fired and outputting the admin bar at the end if not.
Having page elements show in source order is important for accessibility.

[anon66243189]

The admin bar stayed at the top.

[joyously]

Visually, the admin bar is at the top. In the page source, however, it is at the bottom unless CP made similar changes to WP, but I think CP didn’t since we don’t have wp_body_open hook.

[anon66243189]

Got it.
Ok so for now CP has no wp_body_open but it will have in next release, thus, by then the issue is likely resolved.

As of now, we have 2 contributors on that site, I believe both do not require the accessibility to be 100% working.
I believe there will be sooner the next CP release than the next volunteer on the Doc page with access, thus, I think we can forget about this with clean conscience.