Infrastructure/tylerperkins.xyz
2
1
Fork 0
Code Issues Pull Requests Packages Activity

Fix different size background on different pages

Browse Source
This commit is contained in:
Tyler Perkins 2023-07-28 22:44:21 -04:00
parent f6caea99db
commit 35636d14da
3 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/_index.md
View File

@ -6,4 +6,4 @@ date: 2023-06-27
# Hi, I'm Tyler
Software engineer, aspiring postmath
software engineer, aspiring postmath

2
themes/clortox/layouts/_default/baseof.html
View File

@ -2,9 +2,9 @@
<html>
{{- partial "head.html" . -}}
<body>
<div class="parallax background"></div>
{{- partial "header.html" . -}}
<div id="content">
<div class="parallax background" style="overflow-y: none;"></div>
{{- block "main" . }}{{- end }}
</div>
{{- partial "footer.html" . -}}

7
themes/clortox/static/js/script.js
View File

@ -7,9 +7,14 @@ window.onload = function() {
});
window.addEventListener('scroll', function() {
const parallax = document.querySelector('.parallax')
let parallax = document.querySelector('.parallax')
let scrollPosition = window.pageYOffset;
let newSize = (document.querySelector('#content').offsetHeight * 0.66);
if(newSize < window.innerHeight)
newSize = window.innerHeight;
parallax.style.height = newSize + "px";
parallax.style.transform = 'translateY(' + scrollPosition * .5 + 'px)';
})
document.querySelectorAll(".typewriter").forEach(item => {