search

theNewDynamic / gohugo-theme-ananke

Ananke: A theme for Hugo Sites
https://gohugo-ananke-theme-demo.netlify.com/
MIT License
1.13k stars 1.14k forks source link

Footer not at bottom when post is short #502

Open bertday opened 2 years ago

bertday commented 2 years ago

Hello,

Thank you for this lovely theme! I noticed one issue I wanted to surface here. When a post is very short (for example, just a sentence or two), the footer isn't at the bottom. Here is a screenshot of what I'm seeing:

image

I think this may be the same issue as #370, which appears to have been closed.

Altonss commented 2 years ago

This trick resolved the issue:

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer{
  margin-top: auto;
}
t-kimber commented 1 year ago

Hi @Altonss, Thanks for your code snippet! Would you mind giving some details about where/in which file this code should be?

Altonss commented 1 year ago

Hi @Altonss, Thanks for your code snippet! Would you mind giving some details about where/in which file this code should be?

I added this in a custom.css file! I didn't know how if it is possible to modify the tachyon css syntax in the html templates to match this, so I was not able to propose this change in a PR :) I would be happy to read a solution if anyone has an idea!

t-kimber commented 1 year ago

I added this in a custom.css file! I didn't know how if it is possible to modify the tachyon css syntax in the html templates to match this, so I was not able to propose this change in a PR :) I would be happy to read a solution if anyone has an idea!

Wonderful, thanks for your help @Altonss !

Juanpam commented 11 months ago

@Altonss I don't want to steal that snippet and make a PR. You should get the credit for that one!

pythoninthegrass commented 1 month ago

New-ish to hugo so this took a bit of troubleshooting. Got @Altonss' custom.css working with two files:

static/css/custom.css

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

hugo.toml

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'Hello, World!'
theme = 'ananke'

[params]
custom_css = ["css/custom.css"]
custom_js = ["js/custom.js"]

Thanks for posting the workaround!! 🙏