Add compact retail typography variant
This commit is contained in:
parent
a760fe059a
commit
2de505b4b4
@ -9,8 +9,8 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/site.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="section">
|
||||
<body class="compact-type">
|
||||
<main class="section catalog-section">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">Catalog</p>
|
||||
@ -26,7 +26,7 @@
|
||||
<a class="button button--primary" href="#">Применить</a>
|
||||
<a class="button button--secondary" href="index.html">На главную</a>
|
||||
</aside>
|
||||
<section class="product-grid">
|
||||
<section class="product-grid product-grid--compact">
|
||||
<article class="product-card">
|
||||
<div class="product-media"><span class="bottle"></span></div>
|
||||
<div><span class="muted-caps">Bordeaux</span><h3>Chateau Laroque Grand Cru</h3><p>France · Red dry · 2019</p></div>
|
||||
|
||||
101
css/site.css
101
css/site.css
@ -399,6 +399,10 @@ select {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.type-options--five {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.type-card {
|
||||
min-width: 0;
|
||||
min-height: 390px;
|
||||
@ -431,6 +435,23 @@ select {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.type-card.is-selected-soft {
|
||||
border-color: rgba(185, 150, 91, 0.62);
|
||||
background: #fffaf0;
|
||||
}
|
||||
|
||||
.type-card.is-selected-soft::before {
|
||||
content: "Новый компактный";
|
||||
width: fit-content;
|
||||
padding: 7px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-accent-gold);
|
||||
color: var(--color-neutral-black);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.type-card__meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -515,6 +536,82 @@ select {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.type-card--compact {
|
||||
font-family: "Inter", Arial, sans-serif;
|
||||
}
|
||||
|
||||
.type-card--compact h3 {
|
||||
font-family: "Montserrat", "Inter", Arial, sans-serif;
|
||||
font-size: 25px;
|
||||
font-weight: 800;
|
||||
line-height: 1.16;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.compact-type {
|
||||
font-size: 15px;
|
||||
line-height: 1.46;
|
||||
}
|
||||
|
||||
.compact-type .section {
|
||||
padding: 56px 0;
|
||||
}
|
||||
|
||||
.compact-type .section-heading {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.compact-type .section-heading h2 {
|
||||
font-size: clamp(28px, 3.2vw, 40px);
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
.catalog-section .catalog-layout {
|
||||
grid-template-columns: 250px minmax(0, 1fr);
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.compact-type .filters-panel {
|
||||
padding: 20px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.compact-type .filters-panel h3 {
|
||||
margin: 0 0 2px;
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.product-grid--compact {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.product-grid--compact .product-card {
|
||||
padding: 14px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.product-grid--compact .product-media {
|
||||
min-height: 176px;
|
||||
}
|
||||
|
||||
.product-grid--compact .bottle {
|
||||
transform: scale(0.82);
|
||||
}
|
||||
|
||||
.product-grid--compact .product-card h3 {
|
||||
font-size: 17px;
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
.product-grid--compact .product-card p {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.product-grid--compact .product-footer strong {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@ -813,7 +910,8 @@ select {
|
||||
}
|
||||
|
||||
.menu-grid,
|
||||
.product-grid {
|
||||
.product-grid,
|
||||
.type-options--five {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@ -849,6 +947,7 @@ select {
|
||||
.menu-grid,
|
||||
.appellations,
|
||||
.product-grid,
|
||||
.type-options--five,
|
||||
.type-options,
|
||||
.section-heading--split,
|
||||
.footer-nav {
|
||||
|
||||
21
index.html
21
index.html
@ -77,7 +77,7 @@
|
||||
<div class="section-heading section-heading--split">
|
||||
<div>
|
||||
<p class="eyebrow">Typography direction</p>
|
||||
<h2>4 варианта типографики</h2>
|
||||
<h2>5 вариантов типографики</h2>
|
||||
</div>
|
||||
<p>
|
||||
Выбранное направление — Premium Retail: сильная витрина, крупные уверенные заголовки
|
||||
@ -85,7 +85,7 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="type-options">
|
||||
<div class="type-options type-options--five">
|
||||
<article class="type-card type-card--editorial">
|
||||
<div class="type-card__meta">
|
||||
<span>Option 01</span>
|
||||
@ -153,6 +153,23 @@
|
||||
<span>Label 12/16</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="type-card type-card--compact is-selected-soft">
|
||||
<div class="type-card__meta">
|
||||
<span>Option 05</span>
|
||||
<strong>Compact Retail</strong>
|
||||
</div>
|
||||
<h3>Компактный каталог для быстрого выбора</h3>
|
||||
<p>
|
||||
Montserrat + Inter, но с меньшим scale: заголовки спокойнее, карточки плотнее,
|
||||
больше товаров помещается в первый экран.
|
||||
</p>
|
||||
<div class="type-scale">
|
||||
<span>H1 48/54</span>
|
||||
<span>Body 15/22</span>
|
||||
<span>Label 11/14</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user