travis/heinstrom.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make card more prominent and fix iOS touch

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
travis
2026-04-02 16:16:10 -04:00
parent 595a890704
commit 20b4ec5327
2 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
css/style.css
View File

@@ -41,9 +41,9 @@ body {
.card { .card {
display: block; display: block;
position: relative; position: relative;
max-width: 420px; max-width: 500px;
width: 80%; width: 85%;
height: 260px; height: 300px;
color: #fff; color: #fff;
flex: none; flex: none;
perspective: 1000px; perspective: 1000px;
@@ -56,8 +56,8 @@ body {
min-height: 100%; min-height: 100%;
display: block; display: block;
position: relative; position: relative;
background: #111; background: linear-gradient(145deg, #161616, #0e0e0e);
border-radius: 3px; border-radius: 5px;
} }
.card__figure::before { .card__figure::before {
@@ -67,10 +67,10 @@ body {
height: calc(100% - 14px); height: calc(100% - 14px);
top: 6px; top: 6px;
left: 6px; left: 6px;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 2px; border-radius: 3px;
pointer-events: none; pointer-events: none;
box-shadow: 0 30px 20px rgb(0 0 0 / 50%); box-shadow: 0 30px 40px rgb(0 0 0 / 60%), 0 0 80px rgb(0 0 0 / 30%);
} }
.card__deco { .card__deco {
@@ -100,7 +100,7 @@ body {
figcaption { figcaption {
height: 100%; height: 100%;
padding: 25px; padding: 30px;
color: #eee; color: #eee;
font-family: Avenir; font-family: Avenir;
display: flex; display: flex;
@@ -110,9 +110,10 @@ figcaption {
h1 { h1 {
margin: 0; margin: 0;
font-size: 3.3rem; font-size: 3.6rem;
line-height: 3.3rem; line-height: 3.6rem;
font-weight: 900; font-weight: 900;
letter-spacing: -0.02em;
} }
.links { .links {

3
js/main.js
View File

@@ -105,6 +105,7 @@
}; };
this.touchmoveFn = function (ev) { this.touchmoveFn = function (ev) {
ev.preventDefault();
if (self._gyroActive) return; if (self._gyroActive) return;
var touch = ev.touches[0]; var touch = ev.touches[0];
if (!touch) return; if (!touch) return;
@@ -123,7 +124,7 @@
this.DOM.el.addEventListener("mouseleave", this.mouseleaveFn); this.DOM.el.addEventListener("mouseleave", this.mouseleaveFn);
this.DOM.el.addEventListener("mouseenter", this.mouseenterFn); this.DOM.el.addEventListener("mouseenter", this.mouseenterFn);
this.DOM.el.addEventListener("touchstart", this.touchstartFn, { passive: true }); this.DOM.el.addEventListener("touchstart", this.touchstartFn, { passive: true });
this.DOM.el.addEventListener("touchmove", this.touchmoveFn, { passive: true }); this.DOM.el.addEventListener("touchmove", this.touchmoveFn, { passive: false });
this.DOM.el.addEventListener("touchend", this.debounceLeaveFn); this.DOM.el.addEventListener("touchend", this.debounceLeaveFn);
}; };