Website footers are aligned by the top line, not bottom line

[kv9898]

Bug description

Currently, when website footers involve multiple lines, they are aligned by the top line:

This is generated by the following section from the _quarto.yml

page-footer:  
    left: >-
     &#169; 2024 Dianyi Yang  &#8729; Made with [Quarto](https://quarto.org).<br>Based on [Silvia Canelón's](https://silviacanelon.com/) template.<br><a href="https://www.flaticon.com/free-icons/cabbage" title="cabbage icons">Cabbage icons from Park Jisun - Flaticon</a>.
    center: |
      <a class="link-dark me-1" href="https://github.com/kv9898" title="github" target="_blank" rel="noopener">{{< fa brands github >}}</a>
      <a class="link-dark me-1" href="https://www.youtube.com/@dianyiyang5977" title="youtube" target="_blank" rel="noopener">{{< fa brands youtube >}}</a>
      <a class="link-dark me-1" href="https://www.instagram.com/yangdianyi" title="instagram" target="_blank" rel="noopener">{{< fa brands instagram >}}</a>
      <a class="link-dark me-1" href="https://orcid.org/0009-0004-4652-3429" title="orcid" target="_blank" rel="noopener">{{< ai orcid >}}</a> 
      <a class="link-dark me-1" href="https://www.researchgate.net/profile/Dianyi-Yang" title="ResearchGate" target="_blank" rel="noopener">{{< ai researchgate >}}</a>
      <a class="link-dark me-1" href="https://papers.ssrn.com/sol3/cf_dev/AbsByAuth.cfm?per_id=5789803" title="SSRN" target="_blank" rel="noopener">{{< ai ssrn >}}</a>
      <a class="link-dark me-1" href="https://scholar.google.com/citations?hl=en&user=lBLufI8AAAAJ" title="Google Scholar" target="_blank"rel="noopener">{{< ai google-scholar >}}</a>
      <a class="link-dark me-1" href="https://space.bilibili.com/34634614" title="Bilibili" target="_blank" rel="noopener">{{< fa brands bilibili >}}</a>
      <a class="link-dark me-1" href="https://www.zhihu.com/people/yang-dian-yi-9" title="Zhihu" target="_blank" rel="noopener">{{< fa brands zhihu >}}</a>
    
    right: 
      - text: License
        aria-label: "License Details"
        href: license.qmd
      - text: Contact
        aria-label: "Contact Form"
        href: "contact.qmd"

I think it should be made default that they are aligned by the bottom line, like this:

Currently, this is generated by an ugly fix:

page-footer:  
    left: >-
     &#169; 2024 Dianyi Yang  &#8729; Made with [Quarto](https://quarto.org).<br>Based on [Silvia Canelón's](https://silviacanelon.com/) template.<br><a href="https://www.flaticon.com/free-icons/cabbage" title="cabbage icons">Cabbage icons from Park Jisun - Flaticon</a>.
    center: |
      <br>
      <br>
      <a class="link-dark me-1" href="https://github.com/kv9898" title="github" target="_blank" rel="noopener">{{< fa brands github >}}</a>
      <a class="link-dark me-1" href="https://www.youtube.com/@dianyiyang5977" title="youtube" target="_blank" rel="noopener">{{< fa brands youtube >}}</a>
      <a class="link-dark me-1" href="https://www.instagram.com/yangdianyi" title="instagram" target="_blank" rel="noopener">{{< fa brands instagram >}}</a>
      <a class="link-dark me-1" href="https://orcid.org/0009-0004-4652-3429" title="orcid" target="_blank" rel="noopener">{{< ai orcid >}}</a> 
      <a class="link-dark me-1" href="https://www.researchgate.net/profile/Dianyi-Yang" title="ResearchGate" target="_blank" rel="noopener">{{< ai researchgate >}}</a>
      <a class="link-dark me-1" href="https://papers.ssrn.com/sol3/cf_dev/AbsByAuth.cfm?per_id=5789803" title="SSRN" target="_blank" rel="noopener">{{< ai ssrn >}}</a>
      <a class="link-dark me-1" href="https://scholar.google.com/citations?hl=en&user=lBLufI8AAAAJ" title="Google Scholar" target="_blank"rel="noopener">{{< ai google-scholar >}}</a>
      <a class="link-dark me-1" href="https://space.bilibili.com/34634614" title="Bilibili" target="_blank" rel="noopener">{{< fa brands bilibili >}}</a>
      <a class="link-dark me-1" href="https://www.zhihu.com/people/yang-dian-yi-9" title="Zhihu" target="_blank" rel="noopener">{{< fa brands zhihu >}}</a>
    
    right: 
      - text: <br><br> License
        aria-label: "License Details"
        href: license.qmd
      - text: <br><br> Contact
        aria-label: "Contact Form"
        href: "contact.qmd"

Steps to reproduce

Create website with the following footer in Quarto:

page-footer:  
    left: >-
     a<br>b<br>c
    center:  abc
    
    right: 
      - text: License

Expected behavior

It should be made default that they are aligned by the bottom line like the following:

Actual behavior

Currently, when website footers involve multiple lines, they are aligned by the top line:

Your environment

Positron Version: 2024.09.0 (system setup) build 45
Code - OSS Version: 1.92.0
Commit: b0ec249b20455499f9e79ffe0bec35a5ff602ea4
Date: 2024-09-16T02:45:41.974Z
Electron: 30.1.2
Chromium: 124.0.6367.243
Node.js: 20.14.0
V8: 12.4.254.20-electron.0
OS: Windows_NT x64 10.0.22631

Quarto check output

PS D:\website> quarto check
Quarto 1.5.56
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.2.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.5.56
      Path: D:\quarto\bin
      CodePage: 936

      TinyTeX: v2024.09
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: C:\Users\kv989\AppData\Roaming\TinyTeX\bin\windows\
      Version: 2024

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
      Version: 3.12.4 (Conda)
      Path: D:/Anaconda/python.exe
      Jupyter: 5.7.2
      Kernels: python3

[>] Checking Jupyter engine render....OK

[>] Checking R installation...........OK
      Version: 4.4.1
      Path: D:/R-4.4.1
      LibPaths:
        - D:/R-4.4.1/library
      knitr: 1.48
      rmarkdown: 2.28

[>] Checking Knitr engine render......OK

[mcanouil]

It should be made default that they are aligned by the bottom line

Why "should" it?
That's a design choice. Use theme to provide SCSS or css to provide CSS to override.

[cscheid]

Be that as it may, I think changing the alignment is a good idea here.

[mcanouil]

If you add the footer border you might disagree with changing the behaviour.
Consider Quarto documentation website for instance (home page).

[mcanouil]

Please avoid opening issues regarding subjective style matters.
GitHub Discussions are there.

[kv9898]

For those who are interested, I solved this issue by adding the following code to the custom scss:

.nav-footer {     //Dianyi: align the footers to the bottom
  align-items: flex-end; 
}

[kv9898]

I would still like an official option to be added, because this custom solution messes with the repo-actions and other stuff

[cscheid]

My point is not about the appearance. My point is that what you describe doesn't match the way Quarto works:

this custom solution messes with the repo-actions and other stuff

My point is that there's no relation between the actions in GHA and CI in general, and the configuration of themes through SCSS or CSS.

[kv9898]

That's true. I'll try to figure out how to make scss work in this case.

[mcanouil]

I think there is a misunderstanding. The issue is with the repo-actions / GitHub edit link at the bottom I believe.
Also why the current alignment should not be changed considering the current structure of the footer.

[mcanouil]

FYI, the footer has the following structure thus why it's aligned to "top" I believe:

<footer class="footer">
  <div class="nav-footer">
    <div class="nav-footer-left">
      <p>
        CONTENTS
      </p>
    </div>
    <div class="nav-footer-center">
      <p>
        CONTENTS
      </p>
      <div class="toc-actions">
        <ul>
          <li><a href="https://github.com/user/repo/edit/main/index.qmd" class="toc-action"
              data-original-href="https://github.com/user/repo/edit/main/index.qmd"><i
                class="bi bi-github"></i>Edit this page</a></li>
          <li><a href="https://github.com/user/repo/issues/new" class="toc-action"
              data-original-href="https://github.com/user/repo/issues/new"><i
                class="bi empty"></i>Report an issue</a></li>
        </ul>
      </div>
    </div>
    <div class="nav-footer-right">
      <p>
        CONTENTS
      </p>
    </div>
  </div>
</footer>

[cscheid]

Thanks, @mcanouil, I misunderstood the original comment.