if homepage (or a certain page / url) hide footer

Question

I'm in a sort of conundrum. I'm in the process of revamping a Square Space website. And I'm using their beta 'developer' mode; which thus far seems to only allow the source of the CSS files, everything is within their 'blocks' or .page / .block. No .html or .php files to be found anywhere.

So I'm stuck within their 'Code Injection area' -- and for the footer. I set the footer contents, but the footer should show everywhere except for the homepage. I'm wondering if any of you know a way to write inline JS and / or CSS to ONLY hide the footer from the homepage; or by homepage URL?

<center>
  <div>
    <a class="footer" href="https://coolguys.squarespace.com/terms/">FAQ</a>&nbsp;•

    <a class="footer" href="https://coolguys.squarespace.com/green/">GREEN</a>&nbsp;•

    <a class="footer"  href="https://coolguys.squarespace.com/wholesale/">WHOLESALE</a>&nbsp;•

    <a class="footer" href="https://manbearpigs.squarespace.com/links/">LINKS</a>

<br>
  <span>Hello World</span>    
</div>

Doing this with pure CSS would be the most preferable.

I found this:

body.page-id-777 td#footer {
display:none;
}

But unsure how a page URL or etc; could translate into a page ID.

Answer 1

It is easily possible to do this with pure js.

if (document.url == "http://squarespace.com") {
    document.getElementsByClassName("footer")[0].style.display = 'none';
}

Answer 2

I could be wrong, but I think squarespace puts a homepage class on the body for the home page and a page class for every other page. If this is the case (and I suspect you can test it fairly easily), then the following CSS should work:

body.homepage td#footer {display: none;}
body.page td#footer {display: table-cell;}