Merge pull request #1976 from syeopite/fixfooter

Fix footer position to bottom of page
This commit is contained in:
TheFrenchGhosty 2021-04-08 06:23:19 +00:00 committed by GitHub
commit cd1e478b95
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 8 deletions

View file

@ -5,6 +5,12 @@ body {
Arial, sans-serif;
}
#contents {
display: flex;
flex-direction: column;
height: 100vh;
}
.deleted {
background-color: rgb(255, 0, 0, 0.5);
}
@ -280,14 +286,16 @@ input[type="search"]::-webkit-search-cancel-button {
* Footer
*/
.footer {
color: #666666;
margin: 2em 0;
footer {
color: #919191;
margin-top: auto;
padding: 1.5em 0;
text-align: center;
max-height: 30vh;
}
body .footer a {
color: inherit;
footer a {
color: #919191 !important;
text-decoration: underline;
}
@ -654,3 +662,10 @@ body.dark-theme {
content: "[ - ]";
font-size: 1.5em;
}
/*With commit d9528f5 all contents of the page is now within a flexbox. However,
the hr element is rendered improperly within one.
See https://stackoverflow.com/a/34372979 for more info */
hr {
margin: auto 0 auto 0;
}

View file

@ -26,7 +26,7 @@
<span style="display:none" id="dark_mode_pref"><%= env.get("preferences").as(Preferences).dark_mode %></span>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-2-24"></div>
<div class="pure-u-1 pure-u-md-20-24">
<div class="pure-u-1 pure-u-md-20-24", id="contents">
<div class="pure-g navbar h-box">
<div class="pure-u-1 pure-u-md-4-24">
<a href="/" class="index-link pure-menu-heading">Invidious</a>
@ -106,7 +106,7 @@
<%= content %>
<div class="footer">
<footer>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<a href="https://github.com/iv-org/invidious">
@ -140,7 +140,7 @@
<%= translate(locale, "Current version: ") %> <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> @ <%= CURRENT_BRANCH %>
</div>
</div>
</div>
</footer>
</div>
<div class="pure-u-1 pure-u-md-2-24"></div>
</div>