Skip to content

Commit e7c1ae8

Browse files
zesamerizesameri
committed
implement mobile click functionality for pattern selection in alhambra.html; add footer link delay script to multiple HTML files; adjust padding in mobile.css; update square size in grid.js
1 parent b28bfde commit e7c1ae8

File tree

8 files changed

+67
-6
lines changed

8 files changed

+67
-6
lines changed

‎alhambra.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,29 @@ <h1 class="header">
104104
gridCanvas.classList.remove('visible');
105105
document.querySelector('.bio').style.display = 'block';
106106
});
107+
108+
// Add mobile click functionality
109+
link.addEventListener('click', (e) => {
110+
e.preventDefault();
111+
const pattern = link.getAttribute('data-pattern');
112+
113+
if (pattern === 'triangles') {
114+
triangleCanvas.classList.add('visible');
115+
gridCanvas.classList.remove('visible');
116+
} else if (pattern === 'grid') {
117+
gridCanvas.classList.add('visible');
118+
triangleCanvas.classList.remove('visible');
119+
}
120+
121+
document.querySelector('.bio').style.display = 'none';
122+
123+
// Auto-hide after 3 seconds on mobile
124+
setTimeout(() => {
125+
triangleCanvas.classList.remove('visible');
126+
gridCanvas.classList.remove('visible');
127+
document.querySelector('.bio').style.display = 'block';
128+
}, 3000);
129+
});
107130
});
108131
</script>
109132
</body>

‎css/mobile.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
.bio {
2222
margin: 0;
2323
min-width: 80vw;
24-
padding-bottom: 2em;
24+
padding-bottom: 2vh;
2525
}
2626

2727
/* Writing Pages */

‎index.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,12 @@
2828
<link rel="shortcut icon" href="./assets/images/icon.png" type="image/png">
2929
<!-- Fonts -->
3030
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
31-
<!-- Jquery Min Library -->
32-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" defer></script>
33-
<!-- <script src="./js/main.js" defer></script> -->
31+
<!-- Jquery Min Library -->
32+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" defer></script>
33+
<!-- <script src="./js/main.js" defer></script> -->
34+
35+
<!-- Footer Link Delay Script -->
36+
<script src="./js/footer-delay.js" defer></script>
3437
</head>
3538
<body>
3639
<div class="content-wrapper">

‎js/footer-delay.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* Footer Link Delay Script
3+
* Adds a delay to footer links to allow crumple animations to play
4+
*/
5+
6+
document.addEventListener('DOMContentLoaded', function() {
7+
const footerLinks = document.querySelectorAll('.footer a[href]');
8+
9+
footerLinks.forEach(link => {
10+
link.addEventListener('click', function(e) {
11+
// Don't delay if it's the same page or a hash link
12+
if (this.getAttribute('href').startsWith('#') ||
13+
this.getAttribute('href') === window.location.pathname) {
14+
return;
15+
}
16+
17+
e.preventDefault();
18+
const href = this.getAttribute('href');
19+
20+
// Add a small delay to show the crumple animation
21+
setTimeout(() => {
22+
window.location.href = href;
23+
}, 800); // 800ms delay
24+
});
25+
});
26+
});

‎js/grid.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const gridCanvasEl = document.getElementById('gridCanvas');
33
const gridCtx = gridCanvasEl.getContext('2d');
44

55
const CONFIG = {
6-
squareSize: 50,
6+
squareSize: 55,
77
borderWidth: 12,
88
borderColor: '#f5e6d3',
99
navy: ['#0f1f2f', '#1a2838', '#142430', '#1f3040'],

‎poems.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@
3434
<!-- Jquery Min Library -->
3535
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
3636
<!-- <script src="./js/main.js"/></script> -->
37+
38+
<!-- Footer Link Delay Script -->
39+
<script src="./js/footer-delay.js"></script>
3740
</head>
3841
<body id="poems">
3942
<div class="content-wrapper">

‎trash.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,17 @@
3333

3434
<!-- Jquery Min Library -->
3535
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
36+
37+
<!-- Footer Link Delay Script -->
38+
<script src="./js/footer-delay.js"></script>
3639
</head>
3740
<body id="trash">
3841
<div class="content-wrapper">
3942
<section class="writing">
4043
<div class="top-bar">
4144
<h1 class="header">
4245
<a href="./index.html" class="simple-link"><img class="header-img" src="assets/images/flower.svg"></a>
43-
we're all beautiful trash
46+
beautiful trash
4447
</h1>
4548
</div>
4649

‎writings.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@
3333

3434
<!-- Jquery Min Library -->
3535
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
36+
37+
<!-- Footer Link Delay Script -->
38+
<script src="./js/footer-delay.js"></script>
3639
</head>
3740
<body id="essays">
3841
<div class="content-wrapper">

0 commit comments

Comments
 (0)