Skip to content

improvement in ui and ux of footer links and back-to-top #413

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

Open
Mohit-Davar wants to merge 1 commit into
base: master
Choose a base branch
from
Open

improvement in ui and ux of footer links and back-to-top #413

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
125 changes: 90 additions & 35 deletions layouts/partials/footer_section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,107 @@
<footer class="site-footer">
<footer class="site-footer" style="text-align: center; padding: 40px 20px; color: #fff;">
Copy link

@gemini-code-assist gemini-code-assist bot Aug 8, 2025

Choose a reason for hiding this comment

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

high

This file makes extensive use of inline styles. While convenient for small tweaks, it's a best practice to move styles to external CSS files. This improves maintainability, allows for browser caching (better performance), and separates content (HTML) from presentation (CSS). Please consider creating dedicated CSS classes and moving these styles to assets/css/custom.css.

{{ with .Site.GetPage "privacy.md" }}
<p class="powered-by">
<p class="powered-by" style="margin-bottom: 30px;">
{{ printf "<a href=\"%s\">%s</a>" .RelPermalink .Title | safeHTML }}
</p>
{{ end }}

<!-- <p class="powered-by"> -->
<!-- {{ with .Site.Copyright }}{{ . | markdownify}} {{ end }} -->
<!-- {{ with .Site.Copyright }}{{ . | markdownify}} {{ end }} -->
{{ if .IsHome }}
{{ if eq .Language.ContentDir "content/en"}}
<div style="font-size: 18px;color: #fff;text-align: center;margin-top: 20px;">Volcano is a <a href="https://www.cncf.io/" style="color: #c8000b;">Cloud Native Computing Foundation</a> incubating project.</div>
<div style="margin: 52px 0 36px;">
<img src="/img/logo_cloudnative.png" alt="cloudnative logo" width="auto;" height="100px;" style="margin: 0 auto;">
</div>
<div style="font-size: 14px;color: #fff;text-align: center;">The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our <a href="https://www.linuxfoundation.org/trademark-usage/" style="color: #c8000b;">Trademark Usage </a>page.</br>2025 @ Volcano Project Authors. All rights reserved.</div>
<div style="margin-top: 60px;padding-bottom: 40px;">
<a href="#">
<img src="/img/icon_up.svg" alt="up icon" width="33px;" height="33px;" style="margin:0px auto;">
</a>
</div>
{{ else }}
<div style="font-size: 18px;color: #fff;text-align: center;margin-top: 20px;">Volcano是 <a href="https://www.cncf.io/" style="color: #c8000b;">云原生计算基金会</a> 孵化项目</div>
<div style="margin: 52px 0 36px;">
<img src="/img/logo_cloudnative.png" alt="cloudnative logo" width="auto;" height="100px;" style="margin: 0 auto;">
</div>
<div style="font-size: 14px;color: #fff;text-align: center;">Linux基金会已注册并使用相关商标。 有关Linux基金会的商标列表，请参见 <a style="color: #c8000b;">商标使用</a> 页面。</br>最终解释权归2025 @ Volcano 项目作者所有。保留一切权利。</div>
<div style="margin-top: 60px;padding-bottom: 40px;">
<a href="#">
<img src="/img/icon_up.svg" alt="up icon" width="33px;" height="33px;" style="margin:0px auto;">
</a>
</div>
{{ end }}
{{ if eq .Language.ContentDir "content/en"}}
<div style="font-size: 18px; margin: 30px 0;">
Volcano is a <a href="https://www.cncf.io/" style="color: #c8000b; transition: color 0.3s ease;">Cloud Native
Computing Foundation</a> incubating project.
</div>
<div style="margin: 50px 0;">
<img src="/img/logo_cloudnative.png" alt="cloudnative logo" width="auto" height="100px"
style="display: block; margin: 0 auto;">
</div>
<div style="font-size: 14px; line-height: 1.6; max-width: 800px; margin: 0 auto;">
The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux
Foundation,
please see our
<a href="https://www.linuxfoundation.org/trademark-usage/"
style="color: #c8000b; transition: color 0.3s ease;">Trademark Usage </a> page.<br>
{{ now.Format "2006" }} © Volcano Project Authors. All rights reserved.
</div>
<div style="margin-top: 40px; padding-bottom: 20px;">
<a href="#" class="back-to-top" style="text-decoration: none;">
<div class="back-to-top-btn" style="width: fit-content; margin: 0px auto; transition: all 0.3s ease;">
<img src="/img/icon_up.svg" alt="up icon" width="33px" height="33px"
style="display: block; margin: 0 auto; transition: transform 0.3s ease;">
</div>
</a>
</div>
{{ else }}
<div style="padding-bottom: 40px;">
<a href="#">
<img src="/img/icon_up1.png" alt="up icon" width="auto;" height="auto;" style="margin:0px auto;">
</a>
</div>
<p class="powered-by" style="padding-bottom: 20px;">{{ with .Site.Copyright }}{{ . | markdownify}} {{ end }}</p>
<div style="font-size: 18px; margin: 30px 0px;">
Volcano是 <a href="https://www.cncf.io/" tyle="color: #c8000b; transition: color 0.3s ease;">云原生计算基金会</a> 孵化项目
Copy link

@gemini-code-assist gemini-code-assist bot Aug 8, 2025

Choose a reason for hiding this comment

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

critical

There is a typo in the style attribute. It should be style instead of tyle.

Suggested change
Volcano是 <a href="https://www.cncf.io/" tyle="color: #c8000b; transition: color 0.3s ease;">云原生计算基金会</a> 孵化项目
Volcano是 <a href="https://www.cncf.io/" style="color: #c8000b; transition: color 0.3s ease;">云原生计算基金会</a> 孵化项目

</div>
<div style="margin: 50px 0;">
<img src="/img/logo_cloudnative.png" alt="cloudnative logo" width="auto" height="100px"
style="display: block; margin: 0 auto;">
</div>
<div style="font-size: 14px; line-height: 1.6; max-width: 800px; margin: 0 auto 50px auto;">
Linux基金会已注册并使用相关商标。 有关Linux基金会的商标列表，请参见
<a href="https://www.linuxfoundation.org/trademark-usage/" style="color: #c8000b; transition: color 0.3s ease;">商标使用</a> 页面。<br>
最终解释权归 {{ now.Format "2006" }} © Volcano 项目作者所有。保留一切权利。
</div>
<div style="margin-top: 40px; padding-bottom: 20px;">
<a href="#" class="back-to-top" style="text-decoration: none;">
<div class="back-to-top-btn" style="width: fit-content; margin: 0px auto; transition: all 0.3s ease;">
<img src="/img/icon_up.svg" alt="up icon" width="33px" height="33px"
style="display: block; margin: 0 auto; transition: transform 0.3s ease;">
</div>
</a>
</div>
{{ end }}
{{ else }}
<div style="padding-bottom: 30px;">
<a href="#" class="back-to-top" style="text-decoration: none;">
<div class="back-to-top-btn" style="width: fit-content; margin: 0px auto; transition: all 0.3s ease;">
<img src="/img/icon_up1.png" alt="up icon" width="auto" height="auto"
style="display: block; margin: 0 auto; transition: transform 0.3s ease;">
</div>
</a>
</div>
<p class="powered-by" style="padding-bottom: 20px;">
{{ with .Site.Copyright }}{{ . | markdownify}} {{ end }}
</p>

{{ end }}
<!-- {{ if ne .Type "docs" }} -->
<!-- <span class="float-right" aria-hidden="true">
<!-- {{ if ne .Type "docs" }} -->
<!-- <span class="float-right" aria-hidden="true">
<a href="#" id="back_to_top">
<span class="button_icon">
<i class="fas fa-chevron-up fa-2x"></i>
</span>
</a>
</span> -->
<!-- {{ end }} -->
<!-- {{ end }} -->
</footer>

<style>
.back-to-top-btn:hover img {
transform: translateY(-3px);
}

footer a:hover {
color: #ff1a1a !important;
}
Comment on lines +88 to +90
Copy link

@gemini-code-assist gemini-code-assist bot Aug 8, 2025

Choose a reason for hiding this comment

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

medium

The use of !important should be avoided as it can make CSS difficult to debug and override later. You can usually achieve the same result by increasing the selector's specificity. For example, using .site-footer a:hover would likely be specific enough to override any conflicting styles without needing !important.

Suggested change
footer a:hover {
color: #ff1a1a !important;
}
footer a:hover {
color: #ff1a1a;
}


.back-to-top {
cursor: pointer;
}
</style>
Comment on lines +83 to +95
Copy link

@gemini-code-assist gemini-code-assist bot Aug 8, 2025

Choose a reason for hiding this comment

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

high

Embedding a <style> block directly in an HTML file is not recommended. It mixes structure and presentation, making the codebase harder to manage. Please move these styles into the assets/css/custom.css file to keep your CSS organized in one place.


<script>
// Smooth scroll to top functionality
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.back-to-top').forEach(btn => {
btn.addEventListener('click', function (e) {
e.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' });
});
});
});
</script>
Comment on lines +97 to +107
Copy link

@gemini-code-assist gemini-code-assist bot Aug 8, 2025

Choose a reason for hiding this comment

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

high

It's best practice to keep JavaScript in external .js files rather than embedding it in HTML. This separation of concerns improves code organization, maintainability, and allows browsers to cache the script. Please move this script into assets/js/custom.js.