striker/pitstopavto-su-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign: главная — 2-колоночный contact-grid на desktop (адрес+телефоны слева, карта справа), container 76rem
All checks were successful
deploy / deploy (push) Successful in 46s
Details

Browse Source
This commit is contained in:
Dmitry Gusev
2026-05-22 05:27:53 +03:00
parent ed27dcfc14
commit 602ecd871d
2 changed files with 71 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/pages/index.astro
View File

@@ -1,6 +1,6 @@
--- ---
import Base from '../layouts/Base.astro'; import Base from '../layouts/Base.astro';
import { SITE_TITLE, SITE_TAGLINE, ADDRESS, PHONES, GEO } from '../consts'; import { SITE_TAGLINE, ADDRESS, PHONES, GEO } from '../consts';
const mapSrc = `https://yandex.ru/map-widget/v1/?ll=${GEO.lon}%2C${GEO.lat}&z=${GEO.zoom}&pt=${GEO.lon}%2C${GEO.lat}%2Cpm2rdm`; const mapSrc = `https://yandex.ru/map-widget/v1/?ll=${GEO.lon}%2C${GEO.lat}&z=${GEO.zoom}&pt=${GEO.lon}%2C${GEO.lat}%2Cpm2rdm`;
--- ---
@@ -20,43 +20,46 @@ const mapSrc = `https://yandex.ru/map-widget/v1/?ll=${GEO.lon}%2C${GEO.lat}&z=${
<section> <section>
<div class="container"> <div class="container">
<h2>Мы переехали</h2> <h2>Мы переехали</h2>
<p class="address-block"> <div class="contact-grid">
<span class="address-postal">{ADDRESS.postal}</span><br /> <div class="contact-left">
<strong>г. {ADDRESS.region}, {ADDRESS.street}</strong><br /> <div>
{ADDRESS.building} <p class="contact-subhead">Адрес</p>
</p> <p class="address-block">
</div> <span class="address-postal">{ADDRESS.postal}</span><br />
</section> <strong>г. {ADDRESS.region}, {ADDRESS.street}</strong><br />
{ADDRESS.building}
</p>
</div>
<section class="alt"> <div>
<div class="container"> <p class="contact-subhead">Телефоны</p>
<h2>Телефоны</h2> <ul class="phones">
<ul class="phones"> {PHONES.map((p) => (
{PHONES.map((p) => ( <li>
<li> <a href={p.href} aria-label={`Позвонить ${p.display}`}>
<a href={p.href} aria-label={`Позвонить ${p.display}`}> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.9.36 1.78.69 2.6a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.48-1.48a2 2 0 0 1 2.11-.45c.82.33 1.7.56 2.6.69A2 2 0 0 1 22 16.92z"/>
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.9.36 1.78.69 2.6a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.48-1.48a2 2 0 0 1 2.11-.45c.82.33 1.7.56 2.6.69A2 2 0 0 1 22 16.92z"/> </svg>
</svg> {p.display}
{p.display} </a>
</a> </li>
</li> ))}
))} </ul>
</ul> </div>
</div> </div>
</section>
<section> <div class="contact-right">
<div class="container"> <p class="contact-subhead">Как нас найти</p>
<h2>Как нас найти</h2> <div class="map-wrap">
<div class="map-wrap"> <iframe
<iframe src={mapSrc}
src={mapSrc} loading="lazy"
loading="lazy" referrerpolicy="no-referrer-when-downgrade"
referrerpolicy="no-referrer-when-downgrade" title="Карта проезда — Автозапчасти ПитСтоп"
title="Карта проезда — Автозапчасти ПитСтоп" allow="geolocation"
allow="geolocation" ></iframe>
></iframe> </div>
</div>
</div> </div>
</div> </div>
</section> </section>

42
src/styles/global.css
View File

@@ -8,7 +8,7 @@
--accent: #f5b400; /* янтарный — отсылка к авто-тематике */ --accent: #f5b400; /* янтарный — отсылка к авто-тематике */
--accent-soft: #d99a00; --accent-soft: #d99a00;
--font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--reading-max: 64rem; --reading-max: 76rem;
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
@@ -91,11 +91,31 @@ section h2::before {
background: var(--accent); background: var(--accent);
} }
/* ── Контактный блок (2 колонки на desktop) ─────────────────────── */
.contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: stretch;
}
@media (min-width: 880px) {
.contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem; }
}
.contact-left { display: flex; flex-direction: column; gap: 1.75rem; }
.contact-subhead {
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0 0 0.35rem;
}
/* ── Адрес ──────────────────────────────────────────────────────── */ /* ── Адрес ──────────────────────────────────────────────────────── */
.address-block { .address-block {
font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-size: clamp(1.15rem, 1.5vw, 1.4rem);
line-height: 1.6; line-height: 1.55;
max-width: 40rem; margin: 0;
} }
.address-block strong { font-weight: 700; } .address-block strong { font-weight: 700; }
.address-postal { color: var(--ink-soft); font-size: 0.92rem; letter-spacing: 0.05em; } .address-postal { color: var(--ink-soft); font-size: 0.92rem; letter-spacing: 0.05em; }
@@ -103,12 +123,13 @@ section h2::before {
/* ── Телефоны ───────────────────────────────────────────────────── */ /* ── Телефоны ───────────────────────────────────────────────────── */
.phones { .phones {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); grid-template-columns: 1fr 1fr;
gap: 0.75rem; gap: 0.6rem;
margin: 1.5rem 0 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
@media (max-width: 480px) { .phones { grid-template-columns: 1fr; } }
.phones a { .phones a {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -132,13 +153,14 @@ section h2::before {
.map-wrap { .map-wrap {
position: relative; position: relative;
width: 100%; width: 100%;
aspect-ratio: 16 / 9; min-height: 22rem;
height: 100%;
border: 1px solid var(--rule-strong); border: 1px solid var(--rule-strong);
overflow: hidden; overflow: hidden;
background: var(--paper-soft); background: var(--paper-soft);
} }
.map-wrap iframe { width: 100%; height: 100%; border: 0; } .map-wrap iframe { width: 100%; height: 100%; min-height: 22rem; border: 0; display: block; }
@media (max-width: 640px) { .map-wrap { aspect-ratio: 4 / 3; } } @media (max-width: 879px) { .map-wrap { aspect-ratio: 4 / 3; min-height: 0; height: auto; } }
/* ── Footer ─────────────────────────────────────────────────────── */ /* ── Footer ─────────────────────────────────────────────────────── */
.site-footer { .site-footer {