ordinarthur/rebours
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

correct dot

Browse Source
This commit is contained in:
ordinarthur 2026-02-27 17:42:14 +01:00
parent 82226b2313
commit ad400fbd6e
3 changed files with 24 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/index.html
View File

@ -66,9 +66,6 @@
</head> </head>
<body> <body>
<div class="cursor-dot"></div>
<div class="cursor-outline"></div>
<!-- Grid background --> <!-- Grid background -->
<div id="interactive-grid" class="interactive-grid"></div> <div id="interactive-grid" class="interactive-grid"></div>
@ -168,11 +165,6 @@
<!-- HERO --> <!-- HERO -->
<section class="hero" aria-label="Introduction"> <section class="hero" aria-label="Introduction">
<div class="hero-left"> <div class="hero-left">
<div class="hero-floats" aria-hidden="true">
<img class="hero-float" src="/assets/lamp-violet.jpg" alt="">
<img class="hero-float" src="/assets/table-terrazzo.jpg" alt="">
<img class="hero-float" src="/assets/lampes-serie.jpg" alt="">
</div>
<p class="label">// ARCHIVE_001 — 2026</p> <p class="label">// ARCHIVE_001 — 2026</p>
<h1>REBOURS<br>STUDIO</h1> <h1>REBOURS<br>STUDIO</h1>
<p class="hero-sub">Mobilier d'art contemporain.<br>Space Age × Memphis.</p> <p class="hero-sub">Mobilier d'art contemporain.<br>Space Age × Memphis.</p>
@ -180,8 +172,8 @@
</div> </div>
<div class="hero-right"> <div class="hero-right">
<img <img
src="/assets/lamp-violet.jpg" src="/assets/table-terrazzo.jpg"
alt="REBOURS — Lampe Orbitale, prototype béton laqué violet, Paris 2026" alt="REBOURS — Table Terrazzo, plateau terrazzo et acier tubulaire, Paris 2026"
class="hero-img" class="hero-img"
width="1024" height="1024" width="1024" height="1024"
fetchpriority="high"> fetchpriority="high">
@ -308,6 +300,9 @@
</div> </div>
<div class="cursor-dot"></div>
<div class="cursor-outline"></div>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>
</html> </html>

12
public/main.js
View File

@ -4,6 +4,14 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// ---- HEADER HEIGHT → CSS VAR ----
const setHeaderHeight = () => {
const h = document.querySelector('.header')?.offsetHeight || 44;
document.documentElement.style.setProperty('--header-h', h + 'px');
};
setHeaderHeight();
window.addEventListener('resize', setHeaderHeight);
// ---- CUSTOM CURSOR ---- // ---- CUSTOM CURSOR ----
const cursorDot = document.querySelector('.cursor-dot'); const cursorDot = document.querySelector('.cursor-dot');
const cursorOutline = document.querySelector('.cursor-outline'); const cursorOutline = document.querySelector('.cursor-outline');
@ -36,17 +44,17 @@ document.addEventListener('DOMContentLoaded', () => {
} }
} }
let hoverCount = 0;
function attachCursorHover(elements) { function attachCursorHover(elements) {
elements.forEach(el => { elements.forEach(el => {
el.addEventListener('mouseenter', () => { el.addEventListener('mouseenter', () => {
cursorOutline.style.width = '38px'; cursorOutline.style.width = '38px';
cursorOutline.style.height = '38px'; cursorOutline.style.height = '38px';
cursorDot.style.opacity = '0';
}); });
el.addEventListener('mouseleave', () => { el.addEventListener('mouseleave', () => {
cursorOutline.style.width = '26px'; cursorOutline.style.width = '26px';
cursorOutline.style.height = '26px'; cursorOutline.style.height = '26px';
cursorDot.style.opacity = '1';
}); });
}); });
} }

100
public/style.css
View File

@ -3,11 +3,11 @@
========================================================================== */ ========================================================================== */
:root { :root {
--clr-bg: #d8d8d4; --clr-bg: #c8c8c8;
--clr-black: #111; --clr-black: #111;
--clr-white: #e8e8e4; --clr-white: #dcdcdc;
--clr-card-bg: #dcdcd8; --clr-card-bg: #d0d0d0;
--clr-grid: rgba(0,0,0,0.055); --clr-grid: rgba(0,0,0,0.10);
--clr-red: #e8a800; --clr-red: #e8a800;
--font-mono: 'Space Mono', monospace; --font-mono: 'Space Mono', monospace;
--border: 1px solid #111; --border: 1px solid #111;
@ -33,7 +33,7 @@ body {
position: fixed; top: 0; left: 0; position: fixed; top: 0; left: 0;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
pointer-events: none; pointer-events: none;
z-index: 99999; z-index: 999999;
opacity: 0; opacity: 0;
will-change: transform; will-change: transform;
} }
@ -43,7 +43,7 @@ body {
position: fixed; top: 0; left: 0; position: fixed; top: 0; left: 0;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
pointer-events: none; pointer-events: none;
z-index: 99998; z-index: 999998;
opacity: 0; opacity: 0;
transition: width 0.15s, height 0.15s, opacity 0.15s; transition: width 0.15s, height 0.15s, opacity 0.15s;
will-change: transform; will-change: transform;
@ -128,7 +128,7 @@ hr { border: none; border-top: var(--border); margin: 0; }
.hero { .hero {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
min-height: 88vh; height: calc(100vh - var(--header-h, 44px));
pointer-events: none; pointer-events: none;
} }
.hero-left { .hero-left {
@ -141,10 +141,6 @@ hr { border: none; border-top: var(--border); margin: 0; }
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.hero-left > *:not(.hero-floats) {
position: relative;
z-index: 3;
}
.hero-left h1 { .hero-left h1 {
font-size: clamp(3.5rem, 7vw, 6rem); font-size: clamp(3.5rem, 7vw, 6rem);
font-weight: 700; font-weight: 700;
@ -153,53 +149,6 @@ hr { border: none; border-top: var(--border); margin: 0; }
} }
.hero-sub { font-size: 0.85rem; line-height: 1.75; max-width: 300px; } .hero-sub { font-size: 0.85rem; line-height: 1.75; max-width: 300px; }
/* ---- FLOATING ASSETS in hero-left ---- */
.hero-floats {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
.hero-float {
position: absolute;
object-fit: contain;
filter: grayscale(20%);
opacity: 1;
}
.hero-float:nth-child(1) {
width: clamp(100px, 18vw, 180px);
top: 8%;
left: 10%;
animation: float-a 9s ease-in-out infinite;
}
.hero-float:nth-child(2) {
width: clamp(80px, 14vw, 140px);
top: 30%;
right: 8%;
animation: float-b 13s ease-in-out infinite;
}
.hero-float:nth-child(3) {
width: clamp(130px, 22vw, 220px);
bottom: 10%;
right: 5%;
animation: float-c 7s ease-in-out infinite;
}
@keyframes float-a {
0% { transform: translateY(0px) rotate(0deg); }
40% { transform: translateY(-18px) rotate(-1deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes float-b {
0% { transform: translateY(0px) rotate(0deg); }
55% { transform: translateY(-10px) rotate(1.5deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes float-c {
0% { transform: translateY(0px) rotate(0deg); }
30% { transform: translateY(-22px) rotate(-2deg); }
65% { transform: translateY(-6px) rotate(1deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
.hero-right { overflow: hidden; background: #1c1c1c; } .hero-right { overflow: hidden; background: #1c1c1c; }
.hero-img { .hero-img {
@ -239,7 +188,6 @@ hr { border: none; border-top: var(--border); margin: 0; }
flex-direction: column; flex-direction: column;
transition: background 0.2s; transition: background 0.2s;
position: relative; position: relative;
z-index: 0;
} }
.product-card::before { .product-card::before {
content: ''; content: '';
@ -655,44 +603,14 @@ hr { border: none; border-top: var(--border); margin: 0; }
.panel-img-col { height: 50vw; } .panel-img-col { height: 50vw; }
.panel-info-col { overflow-y: auto; } .panel-info-col { overflow-y: auto; }
/* Floats : repositionnés pour la colonne pleine largeur */
.hero-float:nth-child(1) {
width: clamp(80px, 22vw, 140px);
top: 6%;
left: 5%;
}
.hero-float:nth-child(2) {
width: clamp(70px, 18vw, 110px);
top: 10%;
right: 5%;
}
.hero-float:nth-child(3) {
width: clamp(90px, 24vw, 150px);
bottom: 5%;
right: 8%;
}
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.product-grid { grid-template-columns: 1fr; } .product-grid { grid-template-columns: 1fr; }
.header-nav { gap: 1rem; } .header-nav { gap: 1rem; }
.hero-left { min-height: 85vw; } .hero-left { min-height: 85vw; }
/* Floats : plus petits sur mobile, repositionnés pour ne pas couvrir le texte */ .cursor-dot, .cursor-outline { display: none; }
.hero-float:nth-child(1) { body { cursor: auto; }
width: clamp(60px, 18vw, 90px);
top: 4%;
left: 4%;
}
.hero-float:nth-child(2) {
width: clamp(55px, 16vw, 80px);
top: 8%;
right: 4%;
}
.hero-float:nth-child(3) {
width: clamp(70px, 20vw, 100px);
bottom: 4%;
right: 6%;
}
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.product-grid { grid-template-columns: 1fr; } .product-grid { grid-template-columns: 1fr; }