Dedicated page full support

[corch]

Do dedicated pages currently support the ability to change the background colour, or is this issue intended to address that? I have been trying to change the background colour scheme to match the home page for hours without success...

[zjedi]

@corch yes, this ticket should cover it.

[ffrank]

Thanks for merging <3 This should at least address @corch 's issue (which I ran into as well).

[spi43984]

If I set a single page to dark section's color I get on single pages a white space between the content and the footer and after the footer.

Looks like this... The first dark area is the content, the latter the footer.

[ffrank]

I'm seeing this also. In my case, it looks like this is caused by the bottom margin (1em) of the final p element in the page.

This patch seems to help, can you try?

--- a/assets/css/theme.scss
+++ b/assets/css/theme.scss
@@ -225,7 +225,8 @@ a.fn-item {
   .post {
     margin-top: 0;
     border-bottom: none;
-    padding-bottom: 0;
+    // to account for the margin of content elements
+    padding-bottom: 1em;
   }

   // Kill that stylish little circle that was on the border

[spi43984]

the small white space between the content and the footer is gone.

But after the footer I am still seeing white space - it is only to see if the content is shorter than the actual browser window - if there's enough content and you have to scroll the browser window, there is no white space after the footer. I'd expect the white space to have the same background color as the conten.

[spi43984]

the small white space between the content and the footer is gone.

But after the footer I am still seeing white space - it is only to see if the content is shorter than the actual browser window - if there's enough content and you have to scroll the browser window, there is no white space after the footer. I'd expect the white space to have the same background color as the conten.

I played around with it and added the height line into theme.scss - that enlarges the content to the entire browser window size. Will play with it a little more.

.page-template {

  background-color: var(--single-page-bg-color);
  color: var(--single-page-text-color);
  height: calc(100vh - 2em);

Is 2em the right amount? How to get the height auf the actual footer?

Oh no, that doesn't work if the content is longer than the actual window size and one needs to scroll. It needs to be min-height: calc(100vh - 2em);.

That gives the footer at the very bottom:

To have the footer right after the content and the area below the footer filled in the background color I tried that instead of the min-height: calc(100vh - 2em); line:

In themes.scss add the box-shadow: 0 50vh 0 50vh var(--single-page-bg-color); line:

/** ==========  Site footer ============ */
.site-footer {
  background: var(--footer-color-background);
  color: var(--footer-color);
  font-family: "Open Sans", sans-serif;
  font-size: 1.3rem;
  position: relative;
  margin: 0rem 0 0 0;
  padding: 1rem 0;

  box-shadow: 0 50vh 0 50vh var(--single-page-bg-color);

  line-height: 1.5em;
  text-align: center;
}

That gives the footer right after the content and the area behind the footer in the right color:

[spi43984]

please see #159