godotengine/godot-website
1
0
Fork 0
mirror of https://github.com/godotengine/godot-website.git synced 2026-01-02 17:48:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve visual effects on the home page

Browse Source
This commit is contained in:
Yuri Sizov
2022-12-08 16:10:52 +03:00
parent 77af3407f9
commit 2fbd92a96e
4 changed files with 30 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/godotengine/assets/css/main.css
View File

@@ -992,6 +992,8 @@ pre > code {
/* Make links easier to click but still close to each other. */
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
margin-top: -0.4375rem;
margin-bottom: -0.4375rem;
}

4
themes/godotengine/layouts/home.htm
View File

@@ -147,6 +147,7 @@ postPage = "{{ :slug }}"
.btn.btn-flat.btn-hero-learn-more {
background-color: rgb(111 111 111 / 27%);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
@@ -183,8 +184,9 @@ postPage = "{{ :slug }}"
header {
box-shadow: none;
margin-bottom: -70px;
backdrop-filter: blur(4px);
background-color: rgb(134 144 154 / 15%);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
@media (max-width: 1200px) {
input#nav_toggle_cb:checked ~ header {

27
themes/godotengine/partials/footer.htm
View File

@@ -177,10 +177,29 @@ description = "footer partial"
document.querySelector('.hero .credits a span.game').innerText = author.game;
document.querySelector('.hero .credits a span.by').innerText = author.by;
// Parallax effect: On page scroll move background-position up
window.onscroll = function() {
document.querySelector('section.hero .background-image').style.backgroundPositionY = 'calc( 50% + ' + window.pageYOffset * 0.5 + 'px)';
};
// Parallax effect: On page scroll move background-position up.
// This effect is disabled if user opted to have reduced motion in browser/OS settings.
const reducedMotionCheck = window.matchMedia('(prefers-reduced-motion)');
if (!reducedMotionCheck.matches) {
// Parallax effect lags on mobile, so we disable it based on the window resolution.
const parallaxWidth = 768;
const parallaxImage = document.querySelector('section.hero .background-image');
window.addEventListener("scroll", () => {
// Only scroll in desktop or tablet mode.
if (window.innerWidth > parallaxWidth) {
parallaxImage.style.backgroundPositionY = 'calc( 50% + ' + window.pageYOffset * 0.5 + 'px)';
}
});
window.addEventListener("resize", () => {
// Reset the offset, in case we switch to an unsupported state.
if (window.innerWidth > parallaxWidth) {
parallaxImage.style.backgroundPositionY = 'calc( 50% + ' + window.pageYOffset * 0.5 + 'px)';
} else {
parallaxImage.style.backgroundPositionY = '0';
}
});
}
}
},
afterEnter() {

3
themes/godotengine/partials/header.htm
View File

@@ -36,7 +36,8 @@ description = "header partial"
<li {% if selected == 'download' %} class="active" {% endif %}><a href="/download">Download</a></li>
<li><a href="https://docs.godotengine.org">Learn</a></li>
<li><a href="https://docs.godotengine.org/en/stable/community/contributing/index.html">Contribute</a></li>
<li class="fund {% if this.page.id == 'donate' %} active {% endif %}"><a href="/donate">❤ Donate</a></li>
{# We add the control character at the end to force the heart to render as text and not as an emoji. #}
<li class="fund {% if this.page.id == 'donate' %} active {% endif %}"><a href="/donate">❤&#xFE0E; Donate</a></li>
</ul>
</nav>
</div>