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 { 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`;
---
@@ -20,43 +20,46 @@ const mapSrc = `https://yandex.ru/map-widget/v1/?ll=${GEO.lon}%2C${GEO.lat}&z=${
<section>
<div class="container">
<h2>Мы переехали</h2>
<p class="address-block">
<span class="address-postal">{ADDRESS.postal}</span><br />
<strong>г. {ADDRESS.region}, {ADDRESS.street}</strong><br />
{ADDRESS.building}
</p>
</div>
</section>
<div class="contact-grid">
<div class="contact-left">
<div>
<p class="contact-subhead">Адрес</p>
<p class="address-block">
<span class="address-postal">{ADDRESS.postal}</span><br />
<strong>г. {ADDRESS.region}, {ADDRESS.street}</strong><br />
{ADDRESS.building}
</p>
</div>
<section class="alt">
<div class="container">
<h2>Телефоны</h2>
<ul class="phones">
{PHONES.map((p) => (
<li>
<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">
<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>
{p.display}
</a>
</li>
))}
</ul>
</div>
</section>
<div>
<p class="contact-subhead">Телефоны</p>
<ul class="phones">
{PHONES.map((p) => (
<li>
<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">
<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>
{p.display}
</a>
</li>
))}
</ul>
</div>
</div>
<section>
<div class="container">
<h2>Как нас найти</h2>
<div class="map-wrap">
<iframe
src={mapSrc}
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
title="Карта проезда — Автозапчасти ПитСтоп"
allow="geolocation"
></iframe>
<div class="contact-right">
<p class="contact-subhead">Как нас найти</p>
<div class="map-wrap">
<iframe
src={mapSrc}
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
title="Карта проезда — Автозапчасти ПитСтоп"
allow="geolocation"
></iframe>
</div>
</div>
</div>
</div>
</section>

42
src/styles/global.css
View File

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