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

Improve footer #406

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Improve footer #406

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
082ee75
Introduce 3 column layout for the footer as suggested in #46
chlorenz May 6, 2024
4bf24ab
update the layout and content of the footer following issue #46
chlorenz May 7, 2024
22c7466
changes background colour of the footer to dark blue, left-aligns mid…
chlorenz May 13, 2024
a52041c
Merge branch 'master' into improve-footer
chlorenz May 13, 2024
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
58 changes: 48 additions & 10 deletions _includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,52 @@
<footer>
<div class="row text-center">
<div class="background-dark">
<div class="container">
<div class="row equal">
Copy link
Member

Choose a reason for hiding this comment

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

I think we need more margin at the bottom. It currently seems to be quite tight at the bottom:

Screenshot from 2024-05-13 13-10-52


{% if page.last_updated %}<span>Page last updated:</span> {{page.last_updated}}<br/>{% endif %} Site last generated: {{ site.time | date: "%b %-d, %Y" }} <br />
<div class="col-md-4 col-xs-4 text-left">
<ul class="list-unstyled">
<li>
<a href="fundamentals-literature-guide.html">Cite preCICE</a>
</li>
<li>
<a href="community-contribute-to-precice.html">Contribute</a>
</li>
<li>
<a href="community-support-precice.html">Get support</a>
</li>
<li>
<a href="community-training.html">Get training</a>
</li>
</ul>
</div>

<a class="no-icon" rel="license" href="https://creativecommons.org/licenses/by/4.0/">
<img alt="Creative Commons License" src="images/licensebutton-by-40_88x31.png" />
</a>
<br />
This work is licensed under a <a rel="license" href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
<div class="col-md-4 col-xs-4 text-left">
<ul class="list-unstyled">
<li>
<a class="no-icon" href="https://precice.discourse.group"><!-- <i class="fab fa-discourse fa-lg"></i> -->Forum on Discourse</a>
</li>
Copy link
Member

Choose a reason for hiding this comment

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

Any reason to keep the commented-out icons around?

<li>
<a class="no-icon" href="https://github.com/precice"><!-- <i class="fab fa-github fa-lg"></i> -->preCICE on GitHub</a>
</li>
<li>
<a href="#">License</a>
</li>
Copy link
Member

Choose a reason for hiding this comment

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

On my list, I will open a PR asap.

<li>
<a href="about.html">Impressum / Legal</a>
</li>
</ul>
</div>

</div>
<div class="col-md-4 col-xs-4 text-right">
<a class="no-icon" rel="license" href="https://creativecommons.org/licenses/by/4.0/">
<img alt="Creative Commons License" src="images/licensebutton-by-40_88x31.png" />
</a>
<!-- <br />
This work is licensed under a <a rel="license" href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>. -->
<br />
Copy link
Member

Choose a reason for hiding this comment

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

This could still be the alt of the img above.

<br />
{% if page.last_updated %}<span>Page last updated:</span> {{page.last_updated}}<br/>{% endif %} Site last generated: {{ site.time | date: '%d %b %y' }} <br />
</div>

</footer>
</div> <!-- row -->
</div> <!-- container -->
</div> <!-- background -->
6 changes: 4 additions & 2 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,7 @@
<!-- Content Column -->
<div class="{{content_col_size}}" id="tg-sb-content">
{{content}}
{{site.data.alerts.hr_faded}}
{% include footer.html %}
<!-- {{site.data.alerts.hr_faded}} --> <!-- TODO -->
</div>
<!-- /.row -->
</div>
Expand All @@ -113,6 +112,9 @@
<!-- /#main -->
</div>
</main>
<footer>
{% include footer.html %}
</footer>
</body>

{% if site.google_analytics %}
Expand Down
4 changes: 2 additions & 2 deletions _layouts/landing_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
{{content}}
</main>

<div class="container">
<footer>
{% include footer.html %}
</div>
</footer>

<script src="{{ "js/github-queries.js" }}"></script>

Expand Down
16 changes: 16 additions & 0 deletions css/customstyles-precice.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,6 +317,22 @@ ul.devlist>li {
}
}

/* footer */
footer div.container {
padding-top: 20px;
padding-bottom: 20px;
}
@media (min-width: 768px) { /* aligns columns at bottom */
footer .equal {
align-items: flex-end;
}
}
footer .list-unstyled {
margin-bottom: 0px;
}
footer .row.equal {
margin-bottom: 0px;

/*
Let the sidebar scroll up some amount, then fix in place
Uses 'position: sticky' which offsets relative to its nearest scrolling ancestor and containing block
Expand Down
4 changes: 2 additions & 2 deletions css/customstyles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,9 +298,9 @@ li.dropdownActive a {
color: #248EC2;
}

footer {
/*footer {
font-size: smaller;
}
}*/

/* FAQ page */
#accordion .panel-heading {
Expand Down
4 changes: 2 additions & 2 deletions css/modern-business.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,9 @@ header.carousel .fill {

/* Footer Styles */

footer {
/*footer {
margin: 50px 0;
}
}*/

/* Responsive Styles */

Expand Down
2 changes: 1 addition & 1 deletion css/theme-precice.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ strong {
background-color: white;
color: black;
}
.background-dark p {
.background-dark, .background-dark a {
color: white;
}
.background-dark .panel p {
Expand Down
4 changes: 2 additions & 2 deletions pages/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -503,7 +503,7 @@ <h2 class="section-header">Tried and tested by a global community</h2>

<!-- Code example -->

<div class="background-dark">
<div class="background-light">
<div class="container">
<div class="section">

Expand Down Expand Up @@ -544,4 +544,4 @@ <h2 class="section-header">How does it look like?</h2>

</div> <!-- section -->
</div> <!-- container -->
</div> <!-- background-dark -->
</div> <!-- background-light -->
Loading