Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

footer bg changed #355

Closed
wants to merge 1 commit into from
Closed

footer bg changed #355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions legadilo/static/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
--content-footer-height: 104px;
--content-mobile-footer-height: 248px;
--content-header-height: 56px;
--bs-body-bg: #f8f9fa; /* Light mode */
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don’t think we should redefine colors. Removing the bg-* classes on footer and updating the behavior of .content-footer should be enough:

.content-footer {
  height: var(--content-mobile-footer-height);
  background-color: var(--bs-dark);
}

[data-bs-theme="dark"] .content-footer {
  background-color: var(--bs-tertiary-bg);
}

This way, we have the same footer as today on light (which I like) and on dark the footer has the same color than the navbar. What do you think?

Note: with your current modification, footer on light theme is broken.

--bs-body-color: #212529;
}

html {
Expand Down Expand Up @@ -128,3 +130,7 @@ svg.bi {
[data-bs-theme="dark"] img.bi {
filter: invert(0.715);
}
[data-bs-theme="dark"] {
--bs-body-bg: #343a40; /* Dark mode */
--bs-body-color: #f8f9fa;
}
5 changes: 3 additions & 2 deletions legadilo/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
{% endblock page_js %}
{% endblock javascript %}
</head>
<body class="content-body">
<body class="content-body" data-bs-theme="auto">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why force this? There is a theme selector in the navbar to choose how to display: automatic theme from system, light or dark. So I don’t think this is necessary.

<!-- Icons for theme selector -->
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="check2" viewBox="0 0 16 16">
Expand Down Expand Up @@ -228,7 +228,8 @@ <h1 class="modal-title fs-5"></h1>
{% endblock content %}
</div>
</div>
<footer class="content-footer d-flex flex-column justify-content-center bg-dark text-white py-4">
<footer class="content-footer d-flex flex-column justify-content-center bg-gray-700 text-white py-4 bg-body-tertiary"> <!-- adjust bg accordingly -->

<p class="ps-4 pe-4 text-center">
{% if VERSION %}
{% blocktranslate with version=VERSION %}
Expand Down