modify responsive

This commit is contained in:
ordinarthur 2026-02-27 18:36:09 +01:00
parent 7109ba44d7
commit 598cb49b61
6 changed files with 34 additions and 17 deletions

View File

@ -2,7 +2,7 @@ server {
listen 80;
server_name rebours.studio;
root /var/www/rebours/dist;
root /var/www/html/rebours/dist;
index index.html;
# HTML : jamais caché
@ -10,14 +10,19 @@ server {
add_header Cache-Control "no-store";
}
# CSS / JS avec hash Astro : cache long immutable
location ~* \.(css|js)$ {
# Fichiers Astro avec hash dans _astro/ : cache long immutable
location ~* ^/_astro/ {
add_header Cache-Control "public, max-age=31536000, immutable";
}
# Assets (images, fonts) : cache long
location ~* \.(jpg|jpeg|png|gif|webp|svg|woff2|woff|ttf)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
# CSS / JS sans hash (style.css, main.js) : revalidation à chaque visite
location ~* \.(css|js)$ {
add_header Cache-Control "no-cache";
}
# Assets (images, fonts) : cache 7 jours
location ~* \.(jpg|jpeg|png|gif|webp|svg|woff2|woff|ttf|ico)$ {
add_header Cache-Control "public, max-age=604800";
}
location / {

View File

@ -63,7 +63,7 @@ document.addEventListener('DOMContentLoaded', () => {
// ---- INTERACTIVE GRID ----
const gridContainer = document.getElementById('interactive-grid');
const CELL = 60;
const CELL = window.innerWidth <= 600 ? 38 : 60;
const COLORS = [
'rgba(232,168,0,0.45)',
'rgba(232,168,0,0.32)',
@ -73,6 +73,7 @@ document.addEventListener('DOMContentLoaded', () => {
function buildGrid() {
if (!gridContainer) return;
gridContainer.innerHTML = '';
const CELL = window.innerWidth <= 600 ? 38 : 60;
const cols = Math.ceil(window.innerWidth / CELL);
const rows = Math.ceil(window.innerHeight / CELL);
gridContainer.style.display = 'grid';

View File

@ -7,7 +7,7 @@
<priority>1.0</priority>
</url>
<url>
<loc>https://rebours.studio/collection/lumiere-orbitale/</loc>
<loc>https://rebours.studio/collection/solar-altar/</loc>
<lastmod>2026-02-27</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>

View File

@ -595,24 +595,22 @@ hr { border: none; border-top: var(--border); margin: 0; }
/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
.hero, .newsletter { grid-template-columns: 1fr; }
.hero-left { border-right: none; border-bottom: var(--border); min-height: 70vw; padding: 3rem var(--pad); }
.hero-left { border-right: none; border-bottom: var(--border); min-height: 70vw; padding: 3rem var(--pad); order: -1; }
.hero-right { height: 55vw; }
.nl-left { border-right: none; border-bottom: var(--border); }
.product-grid { grid-template-columns: 1fr 1fr; }
.panel-inner { grid-template-columns: 1fr; }
.panel-img-col { height: 50vw; }
.panel-info-col { overflow-y: auto; }
}
@media (max-width: 600px) {
.product-grid { grid-template-columns: 1fr; }
.product-grid { grid-template-columns: 1fr; margin: 0 1rem; border-left: none; }
.product-card { border-left: 2px solid #111; }
.header-nav { gap: 1rem; }
.hero-left { min-height: 85vw; }
.hero { height: auto; }
.hero-left { min-height: unset; padding: 2rem var(--pad); order: -1; }
.hero-right { height: 60vw; }
.cursor-dot, .cursor-outline { display: none; }
body { cursor: auto; }
}
@media (max-width: 600px) {
.product-grid { grid-template-columns: 1fr; }
.header-nav { gap: 1rem; }
}

View File

@ -4,7 +4,7 @@ import Base from '../../layouts/Base.astro';
export function getStaticPaths() {
const PRODUCTS = [
{
slug: 'lumiere-orbitale',
slug: 'solar-altar',
name: 'Solar_Altar',
title: 'REBOURS — Solar Altar | Collection 001',
description: 'Lampe de table unique. Béton texturé coulé à la main + dôme céramique laqué. Pièce unique fabriquée à Paris.',

View File

@ -82,6 +82,19 @@ import Base from '../layouts/Base.astro';
}
a.back:hover { background: var(--clr-black); color: var(--clr-white); }
#loading { color: #888; font-size: 0.78rem; }
@media (max-width: 600px) {
main { grid-template-columns: 1fr; }
.left {
padding: 2rem 1.5rem;
min-height: 55vw;
border-right: none;
border-bottom: var(--border);
}
h1 { font-size: clamp(2rem, 12vw, 3rem); }
.right { padding: 2rem 1.5rem; justify-content: flex-start; }
a.back { align-self: stretch; text-align: center; }
}
</style>
<div style="display:flex; flex-direction:column; min-height:100vh;">