tyler/tylerperkins.xyz
1
0
Fork 0
mirror of https://github.com/Clortox/tylerperkins.xyz.git synced 2026-03-07 10:37:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add base index page

Browse Source
This commit is contained in:
Tyler Perkins
2023-07-15 18:44:31 -04:00
parent ebb1b01c3e
commit fb64b9802f
20 changed files with 295 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
themes/clortox/layouts/_default/.baseof.html.swp
View File

Binary file not shown.

21
themes/clortox/layouts/partials/footer.html
View File

@@ -1,5 +1,22 @@
<footer>
<p>
<footer class="footer-fade">
<div class="footer-sections">
<div class="footer-list" style="width: 85%">
<h4 id="contact" class="footer-header" style="margin-bottom: 5px">Contact</h4>
{{ range .Site.Data.footer.Contact }}
<a data-value="{{ .name }}" class="scramble" href="{{ .url }}">{{ .name }}</a>
{{ end }}
</div>
<div class="footer-list" style="width: 85%"></div>
<div class="footer-list" style="width: 85%">
<h4 class="footer-header" style="margin-bottom: 5px">Services</h4>
{{ range .Site.Data.footer.Services }}
<a data-value="{{ .name }}" class="scramble" href="{{ .url }}">{{ .name }}</a>
{{ end }}
</div>
</div>
<p style="margin: 0px;">
<small>Copyright &copy; {{ now.Year }}. All rights Reserved</small>
</p>
</footer>

7
themes/clortox/layouts/partials/head.html
View File

@@ -1,3 +1,8 @@
<head>
<link rel="stylesheet" href="{{ "css/clortox.css" | relURL }}">
<link rel="stylesheet" href="{{ "css/styles.css" | relURL }}">
<link rel="stylesheet" href="{{ "css/header.css" | relURL }}">
<link rel="stylesheet" href="{{ "css/footer.css" | relURL }}">
<link rel="stylesheet" href="{{ "css/background.css" | relURL }}">
<script src="{{ "js/scramble.js" | relURL }}"></script>
</head>

10
themes/clortox/layouts/partials/header.html
View File

@@ -1,4 +1,10 @@
<header class="navbar sticky">
<a href="{{ "/" | relURL }}">Home</a>
<a href="{{ "/about/" | relURL }}">About</a>
{{ range .Site.Data.header.LeftHandSide }}
<a data-value="{{ .name }}" class="scramble header-item" href="{{ .url | relURL }}">{{ .name }}</a>
{{ end }}
<div class="navbar-right">
{{ range .Site.Data.header.RightHandSide }}
<a data-value="{{ .name }}" class="scramble header-item" href="{{ .url }}">{{ .name }}</a>
{{ end }}
</div>
</header>

14
themes/clortox/static/css/clortox.css
View File

@@ -1,14 +0,0 @@
.navbar {
margin: 0;
background: rgb(11,11,12);
height: 3em;
border-color: white;
border-bottom: 5px;
overflow: hidden;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}

29
themes/clortox/static/js/scramble.js Normal file
View File

@@ -0,0 +1,29 @@
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
window.onload = function() {
document.querySelectorAll(".scramble").forEach(item => {
item.addEventListener("mouseover", scramble);
});
}
function scramble(event) {
let iterations = 0;
const originalValue = event.target.dataset.value;
let interval = setInterval(() => {
event.target.innerText = event.target.innerText.split("")
.map((letter, index) => {
if(index < iterations){
return originalValue[index];
}
return letters[Math.floor(Math.random() * letters.length)];
}).join("")
iterations += 1 / 3;
if(iterations > originalValue.length){
clearInterval(interval);
event.target.innerText = originalValue;
}
}, 30);
}